Pin Panel Footer to Top on ScrollTrigger end

[Ikram Khizer]

Hi,
I Want to stick my panel footer to the top when the scrollTrigger end meets and onEnterBack shows the same behavior as it was before.

Same like screenshot attached:

 

Here's my code

See the Pen xxBBPKK?editors=0010 by ikramkhizer (@ikramkhizer) on CodePen

[mvaneijgen]

Hi @Ikram Khizer welcome to the forum!

 

I've written a guide how you can go about creating any card stacking effect with GSAP (and ScrollTrigger) and it mostly comes down to how you start your layout with CSS, my preferred method is having everything stack already with CSS, so that we have a known position of all the cards. Then you just need to .set() them up with GSAP and create a tween for each. 

 

Check out the guide, there is not one that does already what you want exactly but the one linked below comes close. If you still have questions let us know. Hope it helps and happy tweening! 

 

 

 

See the Pen VwRBNEb by mvaneijgen (@mvaneijgen) on CodePen

[Ikram Khizer]

I have read that article unfortunately it's not helpful. I'm new to GSAP and can't find any help. If you could modify the codepen that I provided would be helpful.

[mvaneijgen]

Would love to know what is not helpful, so I can update the guide. I don't have time right now to modify your pen and restructure the CSS, but here two small modifications to the pen I've shared, to get it even more inline with what you want it to do. 

 

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

[Ikram Khizer]

I have found the solution but the problem is when I try to add that script in my Quasar Vue project it's not working there.

 

See the Pen yLwmJaX by ikramkhizer (@ikramkhizer) on CodePen

[GSAP Helper]

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. ✅