problem with slideshow ScrollTrigger

[Sergye]

Good day! please tell me how to make a smooth animation of the picture. Thank you

See the Pen GRWrwjg by Sergio-novik (@Sergio-novik) on CodePen

[Cassie]

I'm not quite sure exactly what you're trying to achieve, but I assume you want the images to scroll through like a flick book?

If so

Step 1 - you'll need to set it up properly. Make sure all the images are aligned on top of each other using css and by prepping the images correctly in an editor before you export. At the moment they don't line up.

Step 2 - You'll need to take off all the y axis transforms in your code as they're all animating in upwards at the moment

this is a different, but effective approach

See the Pen mdVEpKK by GreenSock (@GreenSock) on CodePen

[Sergye]

2 hours ago, Cassie said:

I'm not quite sure exactly what you're trying to achieve, but I assume you want the images to scroll through like a flick book?

If so

Step 1 - you'll need to set it up properly. Make sure all the images are aligned on top of each other using css and by prepping the images correctly in an editor before you export. At the moment they don't line up.

Step 2 - You'll need to take off all the y axis transforms in your code as they're all animating in upwards at the moment

this is a different, but effective approach
 

 

Thank you so much! Tell me, what am I doing wrong now? 

When scrolling, there should be animation, but for me it works like a slider. please tell meи

 

[elegantseagulls]

You'll need to adjust your background-size and the calculation for offset value for your sprite. From a performance standpoint, you'll likely have better results using an <img /> with inside an overflow hidden div, and transform that image. This is  also easier as you can better use relative units (width: 1100%_

 

Either way, an easy way to de-bug this is to remove the ScrollTrigger and easing, and make sure the final image is in the correct spot at the end of your tween. Then add back in stepped easing and make sure that works as expected. Then tie that to the ScrollTrigger. Basically break it down so you aren't trying to figure out everything at once.