Product Carousel

[BuiltByMD]

I'm attempting to build a product carousel using GSAP.

 

Goal:

Be able to click a button to display a new row of products. When the new row of products is displayed, stagger load each product card

 

I'm still actively learning, but cannot figure out to get this to work properly. Would appreciate any advice!

 

Thank you

See the Pen OJqvqVg by Matt-CopOffMatt (@Matt-CopOffMatt) on CodePen

[Rodrigo]

Hi @BuiltByMD and welcome to the GSAP Forums!

 

Unfortunately I didn't had time to make this work with your current CSS setup, so I created this super simple demo that illustrates my approach for this:

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

 

Is missing the Next/Prev button animations but hopefully you'll get the gist of it and will be able to include that in your code. The logic part of the code seems to be robust and is flexible in terms that it'll allow you to add/remove more rows (right now hardcoded) to the DOM.

 

Hopefully this helps.

Happy Tweening!