Timeline -> Tween + Scrolltrigger = jumping element

[beenjamin]

I have a timeline and a tween+scrollTrigger.
I instantiate the timeline
then instantiate the tween+scrollTrigger.
After that, I add the tween to the timeline via "TIMELINE.add(TWEEN)"

The element is just "jumping" instead of animating the element.

But when I remove the line where i "add" the tween to the timeline, it animates it as it should... why is that so??

Here is a demo via codepen

See the Pen WbNobYd by Ben-jamin-the-reactor (@Ben-jamin-the-reactor) on CodePen.

[Rodrigo]

Hi,

 

You're making one of the most common ScrollTrigger mistakes, adding a ScrollTrigger configuration to a Tween that is a child of a Timeline:

https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens

 

This seems to work the way you intend:

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.green',
    start: 'clamp(top 50%)',
    end: 'top 20%',
    markers: true,
  },
});
var tween = gsap.from('.green', {
  x: 350,
})

tl.add(tween);

Also you might want to check the start point of your ScrollTrigger instance and see the clamp() feature:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#start

 

Hopefully this helps

Happy Tweening!

[beenjamin]

ah god damn 🙈  i have read that AND have forgottten it 😶.

 

 

Note to myself 🫵

so its basically:

-Timeline(ScrollTrigger)

  -Tween

 

OR

-Tween(ScrollTrigger)

 

AND NOT

-Timeline

  -Tween(ScrollTrigger)

 

Thanks a lot for clarification!

[GreenSock]

17 minutes ago, beenjamin said:

so its basically:

-Timeline(ScrollTrigger)

  -Tween

 

OR

-Tween(ScrollTrigger)

 

AND NOT

-Timeline

  -Tween(ScrollTrigger)

Exactamundo. ✅

 

Have fun!