ScrollTrigger animate when slide is full screen
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
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