All projects

Foreground animations

Scroll-triggered animations for media elements to increase engagement

Role

Head of Product Design

Team

2 engineers, 1 PM

Duration

8 weeks

Foreground animations

Context

Scroll-based storytelling is Shorthand's core strength, but animations were limited to background parallax effects. Customers wanted more dynamic ways to reveal content and guide attention as readers scrolled.

How might we add powerful animation capabilities without overwhelming users or compromising performance?

Process

  1. Researched animation patterns in award-winning digital stories
  2. Catalogued customer requests and existing workarounds
  3. Prototyped 15+ animation types, testing for both impact and usability
  4. Conducted performance testing across devices and connection speeds
  5. Iterated on the UI to make animation timing intuitive

Solution

A curated set of scroll-triggered animations for foreground elements—fade, slide, scale, and reveal effects. Users control trigger points and timing through a visual timeline, with real-time preview showing exactly how animations will feel.

Outcomes

  • Stories with animations saw 23% higher average scroll depth
  • Animation features adopted by 40% of active users within 3 months
  • Zero performance complaints despite rich animations

Learnings

  • Fewer, well-designed animation options beat extensive customization
  • The timeline UI was crucial—abstract timing controls didn't resonate
  • Mobile preview was essential since animations often needed adjustment for smaller screens
OracleChapelier Fou
0:00 / 0:00
Projects | Dave Acton