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!
Also curious to see if there is any easy solution.
Here's what i came up with:
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!
tried out just for fun. hope this helps. :-) http://qcnoodling.com/scroll.framer/ (check app.coffee)
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.
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.
The result is here http://antonkartashov.ru/framer/