Animating multiple elements on one page to appear on scroll

I’m trying to animate multiple elements on a homepage, but want them to appear upon scroll. So for instance, I want images to ease up into their spots as you scroll down the page. But so far, I’ve only figured out how to make them appear upon delay or click. This only seems to be useful if you’re animating something that’s on a single screen that isn’t meant to be scrolled (like a confirmation page). Is there a way to animate objects to only appear once they’re visible? Do you have to create a new duplicate frame for every new animation? And how would you handle that for a page with more than one animated object?

One technique uses interactive variants on a single frame, using mouse enter to create “hotspots” while scrolling. Here’s a test demo to a file you can duplicate to your drafts to check out: Figma

The main drawback to this technique is that it’s one-way (e.g. once the element appears, scrolling back up won’t make it disappear), and that if you don’t have a cursor (e.g. on a mobile device) the mouse enter on scroll may not activate. It’s also a little flaky because if you scroll too quickly, the mouse enter may not trigger (or will delay triggering until the scrolling stops and you move the cursor in a hotspot).

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

This has already helped me a lot, but let’s say I wanted to fix the first grey box with the 1 inside when scrolling and the numbers to the right should still appear through the pseudo-scroll-trigger but after appearing scroll up normally. Or I wanted to make an interactive component change through multiple states while staying fixed when scrolling down.
example: https://www.modulize.io/

I hope I’m not asking for too much :smiley:

Thanks for sharing the example. That level of scrolling interaction (where an element you scroll to will lock in place) isn’t really possible AFAIK. I tried a couple of workarounds but none of them worked as reliably as the example you shared.

1 Like