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

What is Framer? Join the Community
Return to index
Aaron V. Geibler
Posted Jan 04 - Read on Facebook

Hello, I try to do an overdrag effect on a PageComponent. I limited overdrag to 0. If a user overdrags on the first or last page of the component, this page should not move but scale up, depending on the distance of the attempted swipe.

I played with the Utils.modulate function, but I don’t know how to read the attempted movement of the finger. I tried it e.g. like this:

pageComp.on Events.SwipeRight, (event) ->
if pageComp.currentPage.name is "dayCard0"
print event.distance
pageComp.scale = Utils.modulate(event.distance, [0, 800], [1,2], true)

Won’t work. Can you help me? Thanks a lot.

2 Comments

Aaron V. Geibler

OK, I added draggable layers on top of the first and last page and used those as triggers. Kinda works, but I wonder if this is the best way to do it:

https://framer.cloud/WcfVu/

There is a bug, though: sometimes, when I release a dragged draggable layer, the PageComponent jumps a bit. Unfortuanaltly hard to reproduce… I think the problem occurs because it takes a while for the draggable layer to snap back to the initial position, and if the PageComponent gets swipped (or believes it gets swipped) while the layer is still on the way, it uses the current x position of that draggable layer to snap to.

Any idea what I could do on that?

Aaron V. Geibler

uups, sorry for the stupid file name. This is not about parallax...

Read the entire post on Facebook