Why do all scrollTriggers fire on the first scroll?

[VikAPAD]

Based on the Horizontal scrollTrigger demo, I have 5 panels that are 100% height and width. Within the panels I have additional content. I want the content to start off the left side of the screen and as you scroll to the next panel it animates into the center. I have it somewhat working for the transition from the first slide to the second slide, but as the second slide comes in, it triggers the content for each frame to animate in so once you get to the 3rd/4th/5th frames, the content is already in the center.

 

I would also preferably like the content to animate off the right side of the panel as the new one is being scrolled in, rather than just staying in the center.

 

See the Pen vYjNMze by VikAPAD (@VikAPAD) on CodePen

[SteveS]

To use scrollTrigger on horizontal scrolling sections, you must provide the trigger with a `containerAnimation` property referring to, well, the container animation.

 

gsap.to(section2, { 
  xPercent: 0,
  scrollTrigger: {
    trigger: section2,
    start: 'left left',
    scrub: true,
    containerAnimation: tl // <- Here!
  }
})
gsap.to(section3, { 
  xPercent: 0,
  scrollTrigger: {
    trigger: section3,
    start: 'left left',
    scrub: true,
    containerAnimation: tl  // <- Here!
  }
})

I tested it and it seems to work closer to what I think you are expecting.

[VikAPAD]

Great, thank you @SteveS that was what I needed. I now have it animating in correctly, any idea how I would go about having the text animate off the right side of the panel as you scroll to the next panel?

 

See the Pen VwxewmO by VikAPAD (@VikAPAD) on CodePen

[SteveS]

Put all the sections in an array, iterate over them and for each one create a timeline with two tweens:

1. tween the text of the current section in

2. tween the text of the last section out

 

put a scrollTrigger on the timeline animation and use scrub.