Stack Animation not working

[Rohit Ganapathy]

Hola GSAP Community 👋,

I've been trying to implement a vertical carousel, Basically the animation is that in the bottom I'll be having a rack, the rack will be consisting of divs and on scrolling up at a single time one div is picked from the rack and is moved upwards where it scales first and then scales down, At the same time during this animation all the elements left in the rack should move forward, it is basically same as when I pick a letter out of a bunch of letters all the letters settle up to fill the space. I've been using ScrollTrigger for implementing this but kinda stcuk on implementing the Stack Animation.

 

Attaching the link for code here:

See the Pen ExEZGMK by adarshsrivastava01 (@adarshsrivastava01) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here are my project requirements...please show me how to build it"  tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

Instead of describing an effect and asking how to do it, perhaps you could just isolate one particular piece you're struggling with and pose a GSAP-specific question about it like "How I adjust the start/end of each <div> element's ScrollTrigger animation so that they run sequentially (not overlapping)?"

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly.