Make a part of a scrollTrigger'd timeline "last more pixels"

[delios]

Hello,

 

So I have a Timeline with a ScrollTrigger, scrub, pin, that goes on 1000px (end +=1000px), and I would like a part of this timeline (a "to") to last like 200 more pixels so that part lasts longer, any idea on how to do that ?"

I'm saying "last 200 more pixels" because I think that would be how to extend the duration of a scrollTrigger'd TL part but if that's a logical mistake, I will obviously take any other solution.

 

Also, about the "pin", I noticed the content of the pin...get pinned at the second parameter of "start" (e.g: start: "top 20% <-"), any idea on how to modify where it's pinned without modifying the start of the scrollTrigger ?

 

Thank you very much!

 

PS: I can provide a codepen eventually tomorrow but I guess my first question can be answered "easily"...

[Rodrigo]

Hi @delios and welcome to the GreenSock forums!

 

If you want a specific instance of a timeline to last more pixels, then you should consider the duration of the entire timeline, factor the duration of the specific instance and check the percentage of the total duration of the timeline that the particular instance lasts. So if your ScrollTrigger extends for 1000 pixels your instance should last 20% more. If your timeline lasts 1 second then your instance should last 0.2 seconds more, but again this depends on the duration of your timeline. In this cases is better to give each instance a duration of 1 second, if possible. If you can't set the duration to a nice round number, then you'll have to do the math for that.

 

If you can't figure it out, then you'll have to provide a minimal demo so we can take a look at it.

 

Happy Tweening!

[delios]

9 hours ago, Rodrigo said:

Hi @delios and welcome to the GreenSock forums!

 

If you want a specific instance of a timeline to last more pixels, then you should consider the duration of the entire timeline, factor the duration of the specific instance and check the percentage of the total duration of the timeline that the particular instance lasts. So if your ScrollTrigger extends for 1000 pixels your instance should last 20% more. If your timeline lasts 1 second then your instance should last 0.2 seconds more, but again this depends on the duration of your timeline. In this cases is better to give each instance a duration of 1 second, if possible. If you can't set the duration to a nice round number, then you'll have to do the math for that.

 

If you can't figure it out, then you'll have to provide a minimal demo so we can take a look at it.

 

Happy Tweening!

See the Pen xxyrbjQ by deliqs (@deliqs) on CodePen

 I made a Codepen, I have 2 things I tried doing for quite a few hours now, messing with the start and stop of the ScrollTrigger to start the animation a little bit before, right now I feel like there is a blank screen for a long time which is not very intuitive, but when I miss with the second value (or both values) of "start", it changes the pin placement and I don't want that. And the make-a-part-longer thing, which I would like to be displaying the text before the screen gets black for more pixels, but if I got what you said right, it's not really possible without adapting the whole ScrollTrigger ?!

 

EDIT: Fixed the pin thing, just had a logic issue which I fixed by simply making the "sereniteSection" min height to screen, adding a div with the texts inside and placing this div like I wanted...

 

Thank you very much for helping!

Edited April 27, 2023 by delios
CSS logic mistake