Animating multiple elements on one page to appear on scroll

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).

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 😃

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.