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

What is Framer? Join the Community
Return to index
Arnaud Le Roux
Posted Mar 11 - Read on Facebook

Hi Everyone, I'm New to Framer, anyone to help me with some parallax on draggable elements ? Here the link of my try :
I want to recreate the Nike Club Training Home screen effect.
When you drag an element, it reveal an another behind following the drag position.


Benjamin Den Boer

Hey Arnaud Le Roux - I've edited your example and included a little parallax dragging effect, based on Utils.Modulate. I'm not familiar with the Nike Club app personally, though. I've also included a little fade, based on your dragging distance, to illustrate and hopefully clarify what can be done with Modulate. :-)

I also took the liberty of simplifying some sections. I wouldn't recommend listening to the same events separately (using multiple DragEnd and DragMove events). Combining the conditional statements within the events suffices.

As for the parallax event - I've added a variable called "offsetY" that basically takes the y position of the dragged card, and maps it to another range, in this case around from [0,200] to [0,50] to have the "Reveal" card move into position at a lower pace.

Hope this helps a bit!


Arnaud Le Roux

Hey Benjamin Den Boer - that's the effect i wanted, i will study your code because mine was messy. I must keep pushing learning Framer. Thanks for your help ! :)

Read the entire post on Facebook