Scrolltrigger end property

[BebDev]

Hi there,

 

I'm currently working on a simple project using Scrolltrigger. As you can see in the pen, I'm having two sections, and want to pin the image in the first section until the second section ends so the image position is fixed and stops at this point. Does "end" prop can help me with this?

 

Cheers!

 

 

See the Pen yLjVoRo by abanobakram (@abanobakram) on CodePen

[mvaneijgen]

I've added the height of the element to the endTriggers height which makes it that it stops at the end of the section.

 

See the Pen oNdYoVE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

you can also do this dynamically by getting the hight of the element with JS 

 

See the Pen BaxQmEE?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

btw `TimelineMax` is really old syntax from GSAP 2, see the migration guide to update to the new syntax 

 

[BebDev]

Thanks so much @mvaneijgen for your help. One more question please.

 

If I have another timeline with pin set for the second section. Is there any way I can keep the image pinned until the animation of the second section ends?

 

 

Now, when the second timeline is trigger, the first one ends and the image scrolls. Is there any way I can use to make the image detects the second section has a pin and should be sticky until the second animation ends?

 

Thanks so much!

[mvaneijgen]

I'm not really sure what you are trying to do, but why not have one ScrollTrigger handle the pinning and the other does some other animation. I would not try and mix ScrollTriggers 

 

See the Pen jOxVZQp?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[BebDev]

You're right, scrub property is not needed. Basically, I want the image to be once I start to scroll until the second section ends. Thanks to you, we managed to achieve that.

 

Now, I want the viewport to be locked on the second section (until the animation of the title Hello World ends), that's why I pinned it in the second timeline.

 

Hope I clarified myself properly.

 

Cheers!