VikAPAD Posted September 7, 2022 Share Posted September 7, 2022 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 More sharing options...
SteveS Posted September 7, 2022 Share Posted September 7, 2022 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. 2 Link to comment Share on other sites More sharing options...
VikAPAD Posted September 7, 2022 Author Share Posted September 7, 2022 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 More sharing options...
SteveS Posted September 7, 2022 Share Posted September 7, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now