GSAP ScrollTrigger Timeline with Multiple Elements, triggering at their own time

[Tony Geek]

So I'm really not quite sure how to Title this, it's a bit of a confusing thing to explain but to demonstrate it is perhaps a lot easier.

 

So I'm working on a timeline of sorts. As you scroll, I want a line to draw from the start of each container to the end. But I want it to look like one seamless line. So when you get to the end of one container, the next one starts.
I've tried looking as posts such as this one, which seems to illustrate how setting a timeline per item works. However, I can't seem to get this to work in my case, as it seems the width of all of these is linked together, and not separately as they should be.

Any help would be greatly appreciated.

See the Pen oNmJeRd by tonycre8-the-bold (@tonycre8-the-bold) on CodePen

[Rodrigo]

Hi,

 

I'm not 100% sure I follow exactly what you're trying to do, but maybe something like this?

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

 

In your original demo you have incorrect start/end points for your lines, you are using horizontal elements, but you're not passing a container animation to the ScrollTrigger config:

lines.forEach(function(line) {
  gsap.to(line, {
    width: '100%',
    scrollTrigger: {
      trigger: line,
      // This has no effect since there is no containerAnimation in the config object
      start: 'left 50%',
      end: () => '+=' + document.querySelector(".timeline-item-container").offsetWidth,
      scrub: 1,
      snap: .5,
      markers: true
    }
  });
});

That will default to vertical start/end points, while the demo I linked is using container animation, so you can see the markers there.

 

Hopefully this helps.

Happy Tweening!

[Tony Geek]

9 hours ago, Rodrigo said:

Hi,

 

I'm not 100% sure I follow exactly what you're trying to do, but maybe something like this?

 

 

 

In your original demo you have incorrect start/end points for your lines, you are using horizontal elements, but you're not passing a container animation to the ScrollTrigger config:

lines.forEach(function(line) {
  gsap.to(line, {
    width: '100%',
    scrollTrigger: {
      trigger: line,
      // This has no effect since there is no containerAnimation in the config object
      start: 'left 50%',
      end: () => '+=' + document.querySelector(".timeline-item-container").offsetWidth,
      scrub: 1,
      snap: .5,
      markers: true
    }
  });
});

That will default to vertical start/end points, while the demo I linked is using container animation, so you can see the markers there.

 

Hopefully this helps.

Happy Tweening!

That is exactly what I was trying to do! Seems like it hasn't quite transferred into my work, but that just means something else is conflicting with it. I'll have to crack down and figure out what that is. Thanks a lot!

[Tony Geek]

Just solved my issue - was running an old version of scrolltrigger, that might add up 🤣