Relative values using ScrollTrigger.create

[d_lobsn 4 Likes (Newbie)]

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

[OSUblake 18,494 Likes (Superhero)]

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...

 

 

[d_lobsn 4 Likes (Newbie)]

you sir are a genius!!! thanks a million. 🍻