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

What is Framer? Join the Community
Return to index
Amber R. Murray
Posted May 24 - Read on Facebook

A Framer JS newbie here:
Q: I am trying to have a draggable layer trigger a state change for a series of layers, but only when the draggable layer passes a defined "x" position. How do I do that?
Thanks in advance.


Eelco Lempsink

Hi Amber, I see what you’re trying to do, you’re almost there! You can use the Insert menu to add a state, in this case I would go for ‘move’ (see the screenshot) since it covers most cases.

Next you can do a couple of different things. The most straightforward way is to simply check the x and toggle the opacity of the layers you want to (dis)appear:

To make the code more compact though, you can go one step further and put the layers you want to move through in a PageComponent and then use Utils.modulate to select the page, perhaps with a nice animation too:

I added a whole bunch of comments to the last shared project, but let me know if you have any questions!

Amber R. Murray

Amazing! That makes so much sense. I really appreciate showing the two alternatives. Helpful to see the multiple ways of using the tool while I am learning. THANK YOU!

Read the entire post on Facebook