ScrollTrigger & Locomotive scroll bug/error?

[Ramzz]

Hello, guys! how's going? i hope you guys just fine ^_^.
I wanna ask about scrollTrigger issue, so i have a locomotive scroll and integrated with GSAP ScrollTrigger but why the animation is going to hard animation or looks like "Steps ease" at my yellow div? (the right side of the "About me" text), and if i add "scrub: true" it will be smooth animation, but i won't add some scrub. You can see my demo here 
 

thanks for helping! Keep safe

See the Pen vYppKBJ by ramzxd (@ramzxd) on CodePen

[akapowl]

Hello @Ramzz - welcome to the GreenSock forums.

 

It is not a bug you are experiencing, but one of the most common ScrollTrigger mistakes you are making - nesting ScrollTriggers in individual tweens of a timeline. You will have to rework your code to have everything work like you want (e.g. with multiple different STs) but since only that last tween of your timeline appears to be relevant in your demo because most of the other elements in the other tweens don't even appear in your demo, the following example only shows it working with that last tween - just to make sure everything is as expected here.

 

See the Pen OJzzXod by akapowl (@akapowl) on CodePen

 

 

 

 

Sidenotes:

 

• You forgot to include the last lines from the locomotive-scoll example on the .scrollerProxy page, after your ST is created. Better include those.
   

  // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
  ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
  
  // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
  ScrollTrigger.refresh();

   

• There is a know regression with the GSAP version you are using (3.9.1) and from tweens, so I updated the example to the latest version
   

   

 

I hope those ressources help clear things up a bit. Happy tweening!

[Ramzz]

Oh my god, i forgot to put "refresh" code for my L Scroll and it's works!. Thanks a lot, sir, i really appreciate that ^_^.