d_lobsn Posted November 24, 2021 Share Posted November 24, 2021 I was actually wondering, what I need to do in order to create two ScrollTriggers on the same element and attaching a tween to it, which moves it by a x value. It seems like the x value is always reset to 0 first, when the new ScrollTrigger is applied. I actually thought relative values are using the current value. What am I missing here. Even setting the transform value initially doesn't seem to work. PS: I'm aware that the example I posted looks like in could reduce the animations, this is not the case in the real project. Should i actually use a function to calculate the absolute xPercentage? Any help would be highly appreciated. See the Pen PoKreKp by daniel-brolli (@daniel-brolli) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted November 24, 2021 Solution Share Posted November 24, 2021 First, you would need another animation. let anim = gsap.to( '.title', { x: '+=50' } ); let anim2 = gsap.to( '.title', { x: '+=50' } ); ScrollTrigger.create({ trigger: ".triggers .first", scrub: true, start: 'top top', markers: true, animation: anim, }); ScrollTrigger.create({ trigger: ".triggers .second", scrub: true, start: 'top top', //end: 'top center', markers: true, animation: anim2, immediateRender: false }) Notice the use of immediateRender on the second ScrollTrigger... 1 Link to comment Share on other sites More sharing options...
d_lobsn Posted November 25, 2021 Author Share Posted November 25, 2021 you sir are a genius!!! thanks a million. 🍻 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