How to unpin the element with animation still going in scrollTrigger

[cx20012002]

Cubo - Framer Template
 

Hi Team

1. Upon scrolling down, the top banner begins to scale down. Simultaneously, there's a text animation taking place within this banner.
2. This top banner is pinned to the center of the browser and remains there.
3. As one continues to scroll down, the elements below the pinned banner start to move up, eventually covering the pinned section.
4. Notably, even as these elements move up to cover the pinned section, the animation on the pinned section continues to run. This means the banner keeps scaling down and the text inside it continues its animation, all while being in the center of the viewport.

 

From my experience with GSAP's ScrollTrigger, when I use the pin feature, elements below the pinned section only start to push it up after the pinned section's animation has fully completed.

Can you provide a solution using ScrollTrigger to replicate the described effect?

See the Pen vYvGmww by cx20012002 (@cx20012002) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[cx20012002]

Hi, 

Thanks for the quick response, I have worked out the solution for the effects I want to achieve and codepen forked in my initial post,

it would be much appreciated if you can check to see if i am doing correctly or there is another better way or the code can be optimized for reuse,

 

thanks and looking forward to your reply

 

Regard

Thomas

 

[mvaneijgen]

Looks perfect. The only things I would do is create a timeline with one ScrollTrigger, but that's it. 

 

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

[cx20012002]

Thanks a lot, it looks much tidier with timeline!!