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!

6 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!

Min-Sang Choi

tried out just for fun. hope this helps. :-) http://qcnoodling.com/scroll.framer/ (check app.coffee)

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