Advanced Scroll-Driven Animation with Framer: A Complex BuildAdvanced Scroll-Driven Animation with Framer: A Complex Build
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Hubert's avatar
Hubert Z.
• Jul 15
This is the most complex animation I've built so far.
The brief was to create a scroll-driven section for a Framer site, where scroll progress not only triggers few mini-animations inside, each running its own state machine, but it's also connected directly to website elements inside Framer.
A few things that made this one hard:
✅ Scroll-to-reveal had to feel smooth and intentional, not like a triggered cutscene. Scroll position needed to map continuously to animation progress, not just fire at thresholds.
✅ 6 separate mini-animations, each with its own state machine, all nested inside one parent composition and orchestrated together without fighting each other.
✅ Getting Framer and Rive to talk to each other cleanly meant building 2 custom code components. Rive's native Framer plugin wasn't enough to pass scroll data through the way this needed.
The result is a piece that reacts to the user in real time instead of just playing on load - which is a much harder problem than it looks like from the outside, and honestly the first time I've built something at this level of interactivity.
RiveWeb DesignMotion Design
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started