Scroll To Play
Scroll to Play is an interactive module that seamlessly integrates video or image sequences into the scrolling experience. It either plays a series of images frame by frame or buffers a video in sync with the user's scroll, providing an immersive, cinematic effect.
Built for maximum flexibility, this module empowers Meta developers to insert unlimited content, media (whether videos or image sequences), and control how and when elements appear, animate, and interact. Its adaptable framework ensures a smooth, engaging experience across various use cases.
GSAP, Canvas, Motion, Ecoding
To push immersive web experiences beyond individual projects, we developed Scroll to Play—a highly scalable module designed to enhance entire platforms and sites. One of the most dynamic modules at Meta, it shares a common backend while delivering vastly different front-end visuals, making it both modular and adaptable.
Performance was a key focus, ensuring smooth playback by optimizing payload size—limiting image sequences or buffering at lower resolutions for lower-end devices. Built using Canvas for rendering and GSAP for animation, the module allows developers to control how much scrolling is required to cycle through media.
I designed and built the first version of this module, which quickly gained traction across Meta. With widespread adoption, it has since evolved through contributions from dozens of teams.
Things to keep in mind
The Reasoning
Conducted competitive analysis, identifying competitors integrating similar features into their sites.
Achieved breakthroughs in dynamic video scrubbing and image sequence scrubbing, enhancing interactivity and user experience.
THE DYNAMICS
This was plugged into an existing workflow for the “what is the metaverse?” site.
I had trouble getting the greenlight for this as a stand alone module.
I knew this module would have a larger impact than the site it was featured in, so scalability was crucial.
The Goals
Increase time spent on page.
Increase scroll depth.
Don’t break the hosting site.
Make it scalable. So developer experience is also important.
The Context
Lower end devices will have a harder time downloading huge payloads like an array of images.
Video scrubbing will also be difficult for devices with low bandwidths.
Let’s conceptualize
The two main things that were kept in mind for this project was scalability and performance, since this would be used by teams across the company for a variety of use cases.
We needed to accommodate a few different scenarios. Different methods of implementation (Full-bleed or inline), as well as different screen sizes, different lengths of sequences, dynamic content, while allowing developers to determine at what frame content fades in and out, and scalable hosting of images through the CMS.
Results
Scroll to Play saw widespread adoption across Meta, with over 70% of platforms integrating it in some capacity. The module significantly boosted key metrics, increasing time spent on page by 8%, learning engagement by 20%, and add-to-cart rates (where applicable) by 6%.
Adoption
~70%
Time Spent
+8%
Learning Engagement
+20%
Add to Cart
+6%
Design and Engineering Lead for Web @Meta
Bay Area California
Featured Work
002 /007
Company
Meta Platforms
Involvement
- UI Design
- Product Design
- Prototyping
Project Info