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

What is Framer? Join the Community
Return to index
Benjamin Den Boer
Posted Apr 29 - Read on Facebook

Hey everyone! Here is a new ScrollComponent example. This one's of an interaction that I've seen mentioned here quite often: Scroll and Click. Learn how to create a scrollable list of layers that can be individually selected, using the ScrollMove & ScrollAnimationDidEnd events.

See: http://share.framerjs.com/ms7yscr79mmf/
Hope this helps. :-)

8 Comments

Lennart Schoors

These examples are great. I learn something from reading the code every time. Keep it up.

Andrew Nalband

Nice!

Gabriel Lovato

I *almost* asked some questions here today that were perfectly answered by this! Thank you!

Jonno Riekwel

It's not completely how it should work though. When you scroll down and you tap, you usually tap to stop the page from scrolling. Not to favourite something. So you'll get a lot of unwanted interactions.

Benjamin Den Boer

Jonno change "Events.TouchEnd" to "Events.Click" within ScrollAnimationDidEnd and you'll get this behaviour instead. ;-)

Daniel Maniés

Benjamin Den Boer: This works perfectly in the preview of Framer Studio, but not on an iPhone.

Benjamin Den Boer

Ah, I see what you mean Daniel Maniés. Thanks for the heads-up! Took a look at it and with a little extra flag (unless scroll.isMoving) this'll work on iPhone as well. :)

See here: http://share.framerjs.com/4zv0ygk1nno0/

Daniel Maniés

Thank you Benjamin :) You made my day!

Read the entire post on Facebook