What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Question Circular CTA Carousel Animation Issues - Web Animation API


New member

I'm developing a circular carousel of cards that uses JavaScript to control the animation.

The carousel animates correctly for the first left or right card click. Afterwards, the grid containing the individual cards does not rotate to the correct new position. This throws off the cards' orientation and breaks the JavaScript - Web Animation API logic.

Carousel and card animation positions are stored in the element's data attributes and are being updated correctly on the every click events.

Could someone to take a look and let me know where my logic has lead me down this dark path.

I've uploaded a sample of the code on Code Pen
Last edited: