ScrollTrigger + fixed item positioning with variable content height

[chailandau]

This is a pretty specific question. I have a ScrollTrigger perspective animation running. It works perfectly. My issue is, I have some content that changes height depending on if the user clicks a certain button. ScrollTrigger refreshes, so that's not a problem. My problem is I want the animated item to end its animation at a certain hard point and remain fixed until the endTrigger. Right now its all based on the content height, which is changeable. 

 

In this example, what I want to happen is:

1. In default view, user scrolls to bottom of blue section and triangle is done its animation and then disappears.
2. If user selects extra space, user scrolls to bottom of blue section. Checkmark finishes animation where it would have in the default view space. It stays fixed until user reaches end of sections and then disappears.

 

It seems like I need to be able to define a stopping point for the animation and then separately a disappearing point. This would work in the 2 scenarios, because I want them both to stop at the same time, I just want it visible longer when there is extra space.

See the Pen gOvmvoW?editors=1010 by chailandau (@chailandau) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "I want it to do ___  and then ___ and then ___ and here are my other requirements...please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.