Jump to content
Search Community

ScrollTrigger animate when slide is full screen

Tonycre8 test
Moderator Tag

Recommended Posts

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...