gsap Scroll-driven cards animation (Garcy.studio style) — cards should enter from bottom, move diagonally, then pin smoothly without jumping

[sumit.kumar]

I’m trying to recreate the scroll-driven cards animation used on https://www.garcy.studio/
 

Target behaviour (reference attached via screenshot):

• Cards start offscreen (bottom / slight right).

• On scroll, the whole cards wrapper moves diagonally (up + left).

• Once the first card fully enters the viewport, the wrapper pins.

• While pinned, cards translate horizontally in a smooth, continuous way.

• No jumps, no resets, and no sudden position corrections after pinning.
  
  I’ve attached screenshots of the reference animation and shared a minimal CodePen demo showing the issue.
  Please help me here.

 

See the Pen WbwBLYV by sumit_appinventiv (@sumit_appinventiv) on CodePen.

[Rodrigo]

Hi,

 

Perhaps something like this:

See the Pen ByKebqJ by GreenSock (@GreenSock) on CodePen.

 

Basically the idea is to use two ScrollTrigger instances, one for moving the cards section horizontally and another to pin the parent of that section. Then is just about using the end property in order to make both instances end at the same scroll position:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/end

 

Hopefully this helps

Happy Tweening!

[sumit.kumar]

Thanks a lot — this is exactly what I was looking for 👍
 

Using two separate ScrollTrigger instances (one for pinning the parent and another for moving the cards horizontally) and syncing them via the same end value is the missing piece. That approach completely avoids the jumping and transform conflicts I was running into.
 

Really appreciate the clear explanation — happy tweening! 🙌