Tonycre8 Posted July 14, 2020 Share Posted July 14, 2020 Hey guys, I'm having a little trouble with something. I'm trying to work out how to get ScrollTrigger to animate content when the slide is fully on screen. In the codepen I've added, there are animated panels on the second slide. However, they animate before you even get onto that slide. Is there any way to delay the animation until the user has gotten fully onto that slide? Thanks a lot, See the Pen mdVGwmq by tonycre8 (@tonycre8) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 14, 2020 Share Posted July 14, 2020 Hey Tony and welcome. I see that you attempted to add a ScrollTrigger for that animation with the following code: scrollTrigger: { trigger: "#slide2", } However, that will attempt to start the animation when #slide2's top is at the bottom of the viewport by default. Since #slide2's top is at the top of the viewport on load, it's going to fire immediately. Since your entire animation of 2 panels is currently setup to take 3000 pixels of scroll distance, half of that is 1500, so you should use the following to make the animation start once the second slide is fully on screen: scrollTrigger: { start: 1500 } Does that make sense? Link to comment Share on other sites More sharing options...
Tonycre8 Posted July 15, 2020 Author Share Posted July 15, 2020 16 hours ago, ZachSaucier said: Hey Tony and welcome. I see that you attempted to add a ScrollTrigger for that animation with the following code: scrollTrigger: { trigger: "#slide2", } However, that will attempt to start the animation when #slide2's top is at the bottom of the viewport by default. Since #slide2's top is at the top of the viewport on load, it's going to fire immediately. Since your entire animation of 2 panels is currently setup to take 3000 pixels of scroll distance, half of that is 1500, so you should use the following to make the animation start once the second slide is fully on screen: scrollTrigger: { start: 1500 } Does that make sense? Yes! Exactly solves my issue, thanks a lot! 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