Accelerated tween

[luglio7]

I need to replicate the vertical scroll animation of this website: https://www.elite-designstudio.com/

It is "just" an infinite linear tweening which is not complicated to me, what is challenging is the acceleration on scroll.
I don't know if this can be implemented via Shifty or if I need to code 100% custom code for the animation.

What I'm thinking is to just tween the elements and get the "acceleration" via the native page scroll. Any other ideas would be great.

Great mini library, love it.

[jeremyckahn]

Hi @luglio7, I'm glad you're enjoying Shifty!

I think you could implement something like this with Shifty. If it were me, I'd initiate a vertical scroll tween whenever a scroll event occurs. I don't think it needs to be too precise, as I imagine that the automatic scrolling should "feel" pretty good so long as it reacts consistently to user input.

You could probably achieve more exact inertia with a physics library (like box2d.js), but I'm not sure that the end result would be worth the additional complexity.

[luglio7]

I used Lenis (https://lenis.studiofreight.com/) to add smooth scroll and used a simple linear tween, the result is quite good in my opinion

https://fond.luglio7.com/

[jeremyckahn]

Oh nice! I haven't seen Lenis before. It looks great!