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

What is Framer? Join the Community
Return to index
Quentin Manning
Posted Dec 09 - Read on Facebook

Hey team! Loving using Framer, but have a question that I'm not sure about how to answer.

Creating a website mockup for a client, and want to have certain animations fire off based on the scroll position of the page.

How would you go about accomplishing this in Framer? I've tried creating an "if then" statement, but because it's not attached to anything, it's creating a problem.

12 Comments

Jordan Robert Dobson

You want to listen to either an onMove, onScroll, onDrag, on "change:y" or similar to fire the events.

Inside those event listeners you setup you can include your code for handling various conditions.

Quentin Manning

Thanks for replying! So, the issue I've seemingly created is that because I'm trying to create a scrollable that looks like a website, getting the scroll position is always 0.

Is there a way to get the position of elements from inside a scrollable area? As in how far from the TOP that item is?

Sorry, new to Framer :p

Quentin Manning

My "scrollable container" is called "windowPane"

Inside that, my content scrolls. I want to get how far the content inside that has scrolled, and then fire off events based on that.

The problem is that doing a windowPane.onScroll doesn't do anything, because obviously, windowPane itself isn't scrolling.

Quentin Manning

Figured it out :D

windowPane.onScroll ->
print windowPane.scrollY

if windowPane.scrollY > 450
push_notifications.animate
properties:
opacity: 0
time: .2
else
push_notifications.animate
properties:
opacity: 1
time: .2

Jordan Robert Dobson

Here's an example for you:

http://jrdn.io/iO18

Jordan Robert Dobson

You also found another option. :D

Jordan Robert Dobson

The onScroll event passes you the event and contentLayer as arguments... which are entirely optional.

Quentin Manning

SWEET :D

Quentin Manning

Is it possible to have multiple IF THEN statements?

I"m able to deck IF scrollY <= 400, and then else if scrollY >= 401, but I can't detect else if scrollY >= 1000

What would be great if I could do "if scrollY <=800 & if scrollY >= 1000" or similar

Quentin Manning

Nevermind, figured that out too :D

else if (windowPane.scrollY >= 401) and not (windowPane.scrollY >= 800)

Read the entire post on Facebook