This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Alex Gilev
Posted Oct 06 - Read on Facebook

Hello everyone. I'm pretty new to Framer and currently working on website prototype.

I want to trigger animations based on scrolling (when an element enters the viewport), for example:

1) Scroll down and 'Section1' fades in and moves 30px up.
2) Scroll down further and 'Section2' fades in and moves 30 px up.

... and so on.

I tried to use:

scroll.onScroll ->
if scroll.scrollY > 900

but I feel there is a smarter way to trigger the animation when an element is in viewport rather than calculating the distance manually and write 'if' statement everytime for every section.

Also, tried to search in the group but didn't find anything for my case.

Any help would be appreciated, thanks guys! 🙏🏻


Jonas Treub

You can create a handy utility function that checks if the layer is visible. Call this function inside the scroll.onScroll function.

isVisible = (scroll, layer) -> return layer.y < scroll.scrollY + scroll.height

If it is visible you can give it a nice animation. Make sure to only start the animation if the layer isn't already animating.

if isVisible(scroll, scrollLayer) and not scrollLayer.isAnimating

Jonas Treub

Here is an example:

Read the entire post on Facebook