Jump to content
GreenSock

BebDev

Scrolltrigger end property

Recommended Posts

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!

 

 

index.png

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

Link to comment
Share on other sites

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 

 

  • Like 3
Link to comment
Share on other sites

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?

 

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

 

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×