Jump to content
GreenSock

VikAPAD

Why do all scrollTriggers fire on the first scroll?

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

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.
×