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

What is Framer? Join the Community
Return to index
Ed Lea
Posted Jun 08 - Read on Facebook

I'm trying to recreate an elastic scrolling effect. I've tried a few different approaches, but none are working! This is what I am trying to achieve https://dribbble.com/shots/1184419-Elastic-Scrolling which I did in After Effects.

I'm trying to stagger the scroll by adding a short delay and easing. There is a demo which would be great to attach to a scroll http://examples.framerjs.com/ search "Animation - Staggered Animation.framer"

Just looking at suggestions of where to start!

5 Comments

Braden Hamm

Also curious to see if there is any easy solution.

Tisho Georgiev

Here's what i came up with:

http://codepen.io/tishogeorgiev/pen/ofdAC?editors=001

It could definitely be improved (esp. in terms of performance), but it could give you some ideas on how to proceed.

I don't think there's an easy solution, really, but you can fake your way to something that looks decent and doesn't require you to write a bunch of code.

Ed, I think you were on the right track with the short delay + easing. That's exactly what I ended up doing (even though that's not how iOS does it at all, but we can't currently do what they are doing). Let me know if you have questions!

Koen Bok

This is much like the effect in ios messages. I think to get it completely right we need some actual physics (attract/detract, only vertical). Next steps.

Ed Lea

Tisho thanks, great effort and nice ideas. I had a version using drag, the problem with drag is that there is no momentum after you stop dragging so it's not like a real scrolling list. I'll hack around and upload results.

Anton Kartashov
Read the entire post on Facebook