Multiple scroll triggers in timeline on the same element

[Mattes]

Hello everyone,   
I seem to have an understanding problem, I want to address an element in a timeline that has different animations.
Unfortunately, it doesn't work the way I created the code, the last animation is displayed first when the page loads.

const tl1 = gsap.timeline({
		scrollTrigger: {
			trigger: "#werte-2",
			markers: true,
			start: "top 80%",
			end: "top 20%",
			scrub: 2,
			toggleActions:"play none none reverse"

		}
	
	
	
	
});

  tl1.fromTo(".ani-werte", { x: 700, y: -100, opacity: 0, rotation: 15, scale: 0.6, }, { scale: 1, x: 500, opacity: 0.4, rotation: -15})





const tl2 = gsap.timeline({
		scrollTrigger: {
			trigger: "#werte-8",
			markers: true,
			start: "top 80%",
			end: "top 20%",
			scrub: 2,
			toggleActions:"play none none reverse"

		}
	
	
	
	
});

  tl2.fromTo(".ani-werte", { scale: 1, x: 500, opacity: 0.4, rotation: -15}, { scale: 1, x: 500, opacity: 0.4, rotation: 15})

What is my mistake?

Thanks for help

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Mattes]

Hi Helper,

sorry i am a Newbie!

See the Pen XWERyBV by mattes007 (@mattes007) on CodePen

[GreenSock]

1. You had the trigger set to trigger: "#werte-2" but there's no such element. I think you meant trigger: "#wert-2". Same for werte-4. 
2. scrub and toggleActions are mutually exclusive. You can't logically have both. If you have scrub, it'll ignore toggleActions.
3. You have scrub: 2 on both, but you have the ScrollTriggers configured so the second one starts at exactly where the first one ends and they're BOTH controlling the same properties of the same element. So you will almost surely run into a timing overlap with a 2-second scrub value. Imagine scrolling quickly down halfway into the 2nd ScrollTrigger (let's say the scroll takes 0.2 seconds). Well the first animation will take 2 seconds to "catch up", so it will be animating for a while and at the SAME TIME you'll have the second ScrollTrigger also animating the same properties of the same element to different values (fighting). See the problem? It's a logic issue in your code/setup. You could set preventOverlaps: true to have it force the animation to the end when scrolling past in order to avoid the overlap. 
4. Since immediateRender is true by default on .fromTo() tweens, your second animation will set the initial state but I assume you want the first tween to set the initial state, so just set immediateRender: false on your 2nd tween.  

Maybe this will help move you in a better direction: 

See the Pen GRxEgaW?editors=1010 by GreenSock (@GreenSock) on CodePen

 

 

[Mattes]

Hi Jack,

thank you very much, now it is clear to me why the animation was behaving so strangely. Ihad already thought about the overlapping in time, but I couldn't come up with a solution! Already thanks to you! 😀