How to change programmatically the end of timeline

[zuppa]

I'm implementing scroll controlling html video as in the codepen example, but I want to change the end of the timeline so the timeline length is compatible with any video length

I have searched the forums and the web but nothing, 

I was trying

 

timeline = gsap.timeline({
  scrollTrigger: {
    trigger: ".galeriaindex",
    start: "top top",
    scrub: true, 
    end: `${(100 * (video.duration || 2))}`, 
    pin: true,
    markers: false, 
  }
}) 

or with... timeline.end = video.duration

 

or declaring the timeline again?

 

timeline = gsap.timeline({
  scrollTrigger: { 
    end: (100 * (video.duration ))+"%",
  }
});

 

none of it worked, is it possible after declaring the timeline to set the end?

See the Pen 9e810322d70c306de2d18237d0cb2d78?editors=0100 by shshaw (@shshaw) on CodePen

[GreenSock]

If I understand your question correctly, you can do either of the following:

1. Just wait to create your animations/ScrollTriggers until you know the duration(s)
2. -OR- use a function-based value like: 

   end: () => "+=" + (video.duration * 100)

ScrollTrigger will call that function whenever it refreshes. Beware, though, that if your video loads after the page finishes loading, you'll likely need to call ScrollTrigger.refresh() to force it to refresh things at that point and grab the value. 

 

Does that help?

[zuppa]

Thank you jack, It worked, That was exacly what I was looking for