Jump to content
Search Community

GSAP card stack with pinned title

jacksmug test
Moderator Tag

Recommended Posts

Hi,

 

The problem is that you are pinning the entire container that also wraps the cards, which are also being pinned, so that creates a very erratic behaviour.

 

Since you're not using pin spacing for the cards, just do the same for the title. For the start and end points you can use the offset top property and the previous ScrollTrigger instance's end point (that would be the last card's ScrollTrigger):

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/previous()

 

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

  • Like 1
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.
×
×
  • Create New...