Jump to content
Search Community

ScrollTrigger after an horizontal scrolling section

Androlax test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hey GSAP !

 

I have a little question.

 

On the codepen the scrollTrigger is not triggered properly after the section scrolling horizontally.

 

I feel like it's triggering while scrolling to bottom when we are in the horizontal section because scrollTrigger is "thinking" we are at the start point to trigger the animation of the next animation "My super title".

 

I imagine I have do calculate more precisely with something like : `start: 'xxx xxx+={OUR CALCULATION HERE}`

 

But I don't know what the `{OUR CALCULATION HERE}` or if there is any other way to do that.

 

Thanks for your help.

See the Pen RwLJZMq by th-o-benoit (@th-o-benoit) on CodePen

Link to comment
Share on other sites

  • Solution

Hello there, @Androlax

 

49 minutes ago, Androlax said:

On the codepen the scrollTrigger is not triggered properly after the section scrolling horizontally.

 

It is not triggering where you'd expect it to, because beforehand you are pinning the whole pageWrapper for the horizontal scroll (to get that non pin-spacing showing for the fake-horizontal effect). Since that element you want to trigger things on later is INSIDE that pageWrapper too, it has no pin-spacing to adjust to, because it also is inside that pin-spacer. So what you're seeing is normal behaviour - the way to 'correct' it to work like you expected now, is to use the pinnedContainer property on any subsequent ScrollTriggers that have triggers on elements which are inside that pageWrapper, after pinning like this.

 

pinnedContainer Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)

 

 

I changed the start in this example to 'top center', so you can see, that now it logs in the correct place. Happy Scrolling :) 

 

See the Pen zYEaEWm by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

38 minutes ago, akapowl said:

Hello there, @Androlax

 

 

It is not triggering where you'd expect it to, because beforehand you are pinning the whole pageWrapper for the horizontal scroll (to get that non pin-spacing showing for the fake-horizontal effect). Since that element you want to trigger things on later is INSIDE that pageWrapper too, it has no pin-spacing to adjust to, because it also is inside that pin-spacer. So what you're seeing is normal behaviour - the way to 'correct' it to work like you expected now, is to use the pinnedContainer property on any subsequent ScrollTriggers that have triggers on elements which are inside that pageWrapper, after pinning like this.

 

pinnedContainer Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)

 

 

I changed the start in this example to 'top center', so you can see, that now it logs in the correct place. Happy Scrolling :) 

 

 

 

 

 

You are right, thanks you a lot ❤️

  • Like 2
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...