Creating image scroller with responsive scaling with ScrollTrigger

[FabioTran]

This is a simple image scroller that should resize the image bigger when the image is in the center and push the other images out. I cannot figure out how to reliably get the image bigger and that it is centered when it is big. Also little issue is that this version has not much scroll time before you go to the next image, since the images are quite small.

 

Would love to hear suggestions to these two issues but mainly getting the image that gets bigger also centered when it does this.

See the Pen GgogoPy by FabioNKT (@FabioNKT) on CodePen.

[mvaneijgen]

Hi @FabioTran welcome to the forum!

 

I've modified your demo a bit, I'm not 100% sure what it is you're looking for, but this is how I would set something up like this. Each item has its own ScrollTrigger and animation that gets played over the scroll distance with scrub: true. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

Hope it helps and happy tweening! 

 

See the Pen MYKYywW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

Instead of setting the animation and ScrollTrigger for each item, you can also create just one timeline with one ScrollTrigger and animate all the items on that one timeline, this way you have more control over what the whole animations is doing and just have things grow and shrink at different rates using the timing of each tween/stagger

 

 

See the Pen RNrNarM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

Keep in mind that animating width and height is bad for performance, so browsers might struggle width this particular animation. 

[Rodrigo]

Hi,

 

Maybe the demos by @GreenSock and @OSUblake in this thread can help:

 

Happy Tweening!