Yuliya92 Posted June 12, 2023 Share Posted June 12, 2023 See the Pen MWzwRmL by 150 (@150) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted June 12, 2023 Share Posted June 12, 2023 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? 1 Link to comment Share on other sites More sharing options...
Yuliya92 Posted June 12, 2023 Author Share Posted June 12, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted June 12, 2023 Share Posted June 12, 2023 Hi, I noticed a few things that could help. 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. 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now