Adding multiple Scrolltriggers

[merlin]

Hi there,

 

I'm trying to add a scrolltrigger instance after another has ended.

Just wondering if that's possible, or if I should resort to tracking progress in onUpdate.

See `tl2` start and `tl` end.

 

Next to that, I have another timeline that should travel the same distance, but finish just a bit earlier `carpetTl`. Is this best practice or can I do that more neatly?

 

Thanks!

 

const TIMELINE_LENGTH = 300;
const container = containerRef.current;
const scrollProgress = { value: 0 };

const tl = gsap
.timeline({
  scrollTrigger: {
    trigger: container,
    pin: true,
    scrub: true,
    end: `+=${TIMELINE_LENGTH}%`,
  },
})
.to(
  scrollProgress,
  {
    value: 1,
    onUpdate: () => {
      camera.position.copy(catmull.getPoint(scrollProgress.value));
      camera.lookAt(catmullLookat.getPoint(scrollProgress.value));
    },
  },
  0,
);

const tl2 = gsap
.timeline({
  scrollTrigger: {
    trigger: container,
    pin: true,
    scrub: true,
    start: `+=${TIMELINE_LENGTH}%`,
    end: `+=${TIMELINE_LENGTH * 2}%`,
  },
})
.to(scrollProgress, {
  onEnter: () => {
    setTransitionCard(true);
  },
  onLeave: () => {
    setTransitionCard(false);
  },
});

const carpetTl = gsap
.timeline({
  scrollTrigger: {
    trigger: container,
    pin: true,
    scrub: true,
    end: `+=${TIMELINE_LENGTH * 0.7}%`,
  },
})
.fromTo(
  redCarpetRef.current.position,
  {
    z: 1130,
  },
  {
    z: 350,
  },
  0,
)
.fromTo(
  redCarpetRollRef.current.position,
  {
    y: 4,
  },
  {
    y: 0,
  },
  0,
)
.fromTo(
  redCarpetRollRef.current.scale,
  {
    z: 1,
  },
  {
    z: 0,
  },
  0,
);

 

[Cassie]

Hi there Merlin,

 

this looks alright to me. If it works it works!

 

Not sure what you mean about tracking progress in onUpdate though - that will return the progress value from 0 to 1 - and you're talking about start and end markers, which are positions in the viewport, so I'm not sure how these two would tie in together for a solution to the problem you've explained.

 

You can also use the previous scrollTrigger's end value like this, that could be an alternate solution?

 

ScrollTrigger.create({
  start: self => self.previous().end, // start at the end of the previous ScrollTrigger
  ...
});

Hope this helps!
 

[GreenSock]

By the way, you could simplify this: 

const scrollProgress = { value: 0 };

const tl = gsap
.timeline({
  scrollTrigger: {
    trigger: container,
    pin: true,
    scrub: true,
    end: `+=${TIMELINE_LENGTH}%`,
  },
})
.to(
  scrollProgress,
  {
    value: 1,
    onUpdate: () => {
      camera.position.copy(catmull.getPoint(scrollProgress.value));
      camera.lookAt(catmullLookat.getPoint(scrollProgress.value));
    },
  },
  0,
);

To this:

ScrollTrigger.create({
  trigger: container,
  pin: true,
  end: `+=${TIMELINE_LENGTH}%`,
  onUpdate: self => {
    camera.position.copy(catmull.getPoint(self.progress));
    camera.lookAt(catmullLookat.getPoint(self.progress));
  }
});

Unless you need easing in which case you could easily apply that as well (I'll spare you the explanation unless you request it)