juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.42k stars 3.68k forks source link

Animate change between 2 css class names #834

Open mendrinos opened 1 year ago

mendrinos commented 1 year ago

Is your feature request related to a problem? Please describe. I use Tailwind, and all UI HTML elements use class names to define the positioning of the elements. When I animate with animejs, and I change the value "left: x" of the elements, I end up having HTML that looks like this:

Describe the solution you'd like Able to define an animation from a class name to a new class name, for example

to

Describe alternatives you've considered I am watching the window width, and I reset all stylings.

Additional context Facing issues with breakpoints, a few animations are behaving differently across small screens (mobile) and large screens (desktop).

Pulse-Git commented 1 year ago

@mendrinos I think if you just want to change a class, it's kinda overkill to use this library.

Anyway, in theory you can use the update callback and change the class when the event returns an specific progress/percentage value

different55 commented 1 year ago

It's also not entirely clear what you're asking about. It seems as if chunks are missing out of your post.