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 : http://share.framerjs.com/9oewxhc02iro/
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.
Thanks!

2 Comments

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!

See: http://share.framerjs.com/dbqgb157f15j/

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