How to make previous element on scroll trigger not moving

[dingkai031]

Hello lovely communities of GSAP, I'm new with GSAP. I need help, 

As you can see the previous element in the demo, it is moving on scroll. What I expect is the previous element stay as the "scroll trigger" triggered and not getting out of view port. By the previous element, I mean the one with background red and also the animated element height need to stay the same.

 

Is this normal? or is there any method that I need to adjust? 

Thank you

See the Pen vYPVLbx by dingkai031 (@dingkai031) on CodePen.

[mvaneijgen]

Instead of setting pin: true, you can also set pin to an element, if we set it to the element that encloses everything you want to pin eg the .container it works as you want. My advise check the docs and just read it once, sounds boring... but you'll be surprised how much it explains that you didn't even know was possible  https://gsap.com/docs/v3/Plugins/ScrollTrigger/. Hope it helps and happy tweening! 

 

See the Pen mdozPrp by mvaneijgen (@mvaneijgen) on CodePen.

[dingkai031]

thank you for the explanation!!