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

What is Framer? Join the Community
Return to index
Arvi Raquel-Santos
Posted Feb 05 - Read on Facebook

Looking for help on implementing a snap scroll. I was able to figure out how to snap between the first and second cards but can't figure out how to implement snapping to the third card. I have a simple conditional but I assume I'll need something more complex?

Any help is appreciated. Thanks!

http://share.framerjs.com/o3jcfqmsri4t/

15 Comments

Brandon Souba

Some tips for the logic here: http://share.framerjs.com/9vaw1axrlzaj/

Brandon Souba

Mostly about what to do when you let go in-between a range

Arvi Raquel-Santos

So does that mean that I'll have multiple conditionals for each card?

Brandon Souba

I would actually put the cards in a superLayer then scroll that.

Brandon Souba

one set of logic then.

George Kedenburg III
Arvi Raquel-Santos

Woah, thanks George! Would you mind explaining what's happening in the logic that you wrote?

George Kedenburg III

Yeah I probably should've commented it a little more haha. Will add comments when I get back to my computer.

George Kedenburg III

Ok, I added a ton of comments. I think this makes sense but lmk if anything is still confusing: http://share.framerjs.com/fcmlg7dpcdxn/

Arvi Raquel-Santos

George, so awesome! Not sure if I could've written that myself. Thanks so much for writing super concise comments.

Kim Does

George Very cool and concise! I guess to make it more complete you'd probably want to have some special conditions for the first and last card right? At the moment, pulling down the first (orange) card beyond halfway, makes it then snap to the second (yellow) card.

Brandon Souba

George Kedenburg III looks awesome.

George Kedenburg III

Brandon Arvi thanks!

Arvi Raquel-Santos

For my learning purposes, I also tried Brandon's method — http://share.framerjs.com/ilic8vw8asud/ — not as accurate as George's but still working to a certain extent. Any tips to make this better (other than George's solution of course ;) ?

George Kedenburg III

Kim here's an example with edge case detection :) it doesn't work 100% in this demo because the last screen is too long but should work if all screens were equal. http://share.framerjs.com/sslxulom5uj1/

Read the entire post on Facebook