ScrollTrigger pin timeline empty place

[Yuliya92]

See the Pen MWzwRmL by 150 (@150) on CodePen

[mvaneijgen]

Hi @Yuliya92 welcome to the forum!

 

Your post doesn't have any question attached to it, can you maybe explain your issue in a few sentences? 

[Yuliya92]

26 minutes ago, mvaneijgen said:

Привет@Yuliya92 добро пожаловать на форум!

 

К вашему сообщению не прикреплен вопрос, не могли бы вы объяснить свою проблему в нескольких предложениях? 

I just started to study animation and I can't understand why there is a lot of empty space at the end and how to slow down the animation

[Rodrigo]

Hi,

 

I noticed a few things that could help.

1. There are some delays between different parts. Keep in mind that with ScrollTrigger you don't need gaps longer than the duration of a tween. When using ScrollTrigger the duration of a tween sill be spread out in an amount of pixels. For example if you have an animation that lasts one second and you set up your ScrollTrigger instance to scrub that animation in 400 pixels of scroll amount, if you add a delay of two seconds that delay will translate into 800 pixels of scroll amount. See the problem? Now starting to create and run calculations to estimate how many pixels they will use can become quite a long task, so just use your instincts when it comes to that. A good starting point would be using the position parameter and add maybe 10% of the duration of the tween, so if the animation is 1 second, then 0.1 seconds.
2. Your main container <div class="scroll-wow"> is quite tall as it is (almost 3000 pixels of height in a 1920x1080 display) so that could account for the extra space at the bottom.

I forked your codepen and removed the ScrollTrigger config so you can see it the space and the gaps between the animations:

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

 

Finally this video might give you some valuable insight on a good approach to create your ScrollTrigger controlled animations:

 

Hopefully this helps.

Happy Tweening!