zuppa

when the element1 exists, i want the trigger of the timeline2 for element2 to be the end of timeline1 https://codepen.io/msmzuppa/pen/oNdrMmX

Sorry, Basically, all i want is to trigger one timeline at the end of another, The element that triggers my second timeline, is already on top top of window, because it has top:-100%; so it will fade in above the effect of the previous timeline, I want them to be separated because the first timeline may or may not exist

So, I have a timeline, and the only thing I want to do is to set the start to "top (ENDOFOTHERTIMELINE)", then the timeline will trigger when the other one finishes

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

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?

That's what I thought, hahah, alright. A huge THANK YOU ALL for the team GreenSock for all this amazing plugins

Thank you very much akapowl, and thank you all that entered this topic this works as I expected, but again, I have a question, can I do something like this? I want to do this, because I have my menu bar above, and I don't want the items to be the height of the screen, but the height of the screen minus the menu bar height end: '+=100% - ' + $(".barramenu").height() gsap.utils.toArray(".cascade .item").forEach(panel => { let fundo = panel.querySelector('.fundo') gsap.timeline({ //cria timeline scrollTrigger: { trigger: panel, scrub: true, start: 'top top', end: '+=100% - ' + $(".barramenu").height() } }).to(fundo, { width: "100%"}); ScrollTrigger.create({ trigger: panel, pin: true, pinSpacing: false, start: 'top top', end: '+=200% - ' + $(".barramenu").height() }); });

My example is working in the way I want it, its just a little bit bugged ( ex: it was supossed to stop the black overlay from growing until the middle of the screen, and then it started scrolling, and appears the next slide), right now its overlaping the animations, but I'v made this using a padding-bottom, in wich I think it's not the best approach, how can I achieve this with GSAP's utils the correct way?