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

What is Framer? Join the Community
Return to index
Tojo Rakoto Ramanantsoa
Posted Oct 05 - Read on Facebook

Hey guys.
I've been wondering if anyone could tell me how to make some of my content appear (with opacity, scale or whatever...) only when I scroll down at them, and get the effect that they're just been loaded, like for example content on Pinterest.
Thanks :)

11 Comments

Jonas Treub

You'll need to listen for the onMove event on the ScrollComponent. Inside the event function you can read the scrollY offset. Using that offset value you can calculate whether the content is visible. Once visible you can animate the content layer. Let us know if you need more help. Good luck!

Tojo Rakoto Ramanantsoa

Thanks :) I will keep you posted

Ronald Rez

hey. sounds good but how do you stop the animation event getting triggered continually while the onMove event is firing?

Jonas Treub

You'll need to check whether the layer is already animating or does not need to be animated because it already is in the final state.

Ronald Rez

is that possible if i'm using states for the animation? ..can't find any property to check for in the docs

Ronald Rez

..found it. it works if i check the current state e.g.

searchScroll.onMove ->
if searchScroll.scrollY > 160 && $.Group_2.states.current != "init"
$.Group_2.states.switch("init")

Tojo Rakoto Ramanantsoa

Ronald Rez Hey man. Can you walk me through your process, I think yours is better than mine. :)

Niels van Hoorn

Any animation on a layer, through states or otherwise, can be checked by using the isAnimating property on Layer: https://framerjs.com/docs/#layer.isAnimating

Ronald Rez

Thanks Niels. Is there such a thing as an event that fires every 'frame' for Layers? I'm thinking back to Flash Actioncript where movieclips had an onEnterFrame.

What I'm trying to achieve is a way for each layer to check its own y position relative to the screen dimensions so I can tell it to do something when it comes on screen. E.g. Animate scale and opacity. When layers are in a scroll component the layer y is fixed but the parent scroll component y changes. I want to get at layer y pos. hope that makes sense.

Niels van Hoorn

Do you mean every frame of the animation, or every time your ScrollComponent moves?
I think you have to implement the checking if the layer becomes visible (or enters the viewport) manually

Jonas Treub

Here is a quick example how to calculate which rows are visible. I added comments to the code which should clarify the logic. http://share.framerjs.com/hbwn8bhgta57/

Read the entire post on Facebook