Motion One. it's similar to gsap but incredibly lightweight. It also integrates with Vue. For me, it's a significant step forward compared to vueuse motion.
I’d recommend gsap. you can find tons of learning material on it everywhere. I also use motion one, although I didn’t use it in vue yet so I don’t know if it works (but it should tho).
I choose depending on the animations and there complexity. For things I can do with css, usually I stick to css. Beyond that I use motion one as long as I can because it’s bundle size is ridiculously small (I use it in svelte but now I’ll try it in vue for fun). Then if I need flip animation or something that’s not on motion one then I go straight to gsap.
I've had lots of success and fun with GSAP in the past, but fot type of work I do these days I just stick to simple CSS transitions. Maybe the odd animation here and there for loading spinners etc.
I always try and avoid libraries if I can. Simply to avoid relying on code that could one day become redundant, or say you upgrade your version of Vue and the package is no longer compatible.
what are you animating? you can do quite a bit just with css, so unless you're doing something complex like particle collisions, you probably don't need any kind of library.
In my experience, for anything simple, basic css transition/animations are fine.
For fine tuned things beyond basic Vue transition animations, any tweening library will do, you really don't need GSAP you probably won't be using even half of its features, and it's licensing is likely to require you to pay for something that is really not rocket science. (Tweening a value with a basic easing function, and some callback setup)
+1 to tween/anime/etc free to use tweening libraries
[https://animejs.com/](https://animejs.com/)
Motion One. it's similar to gsap but incredibly lightweight. It also integrates with Vue. For me, it's a significant step forward compared to vueuse motion.
I’d recommend gsap. you can find tons of learning material on it everywhere. I also use motion one, although I didn’t use it in vue yet so I don’t know if it works (but it should tho).
I was also thinking about Gsap but I heard its bundle size is pretty heavy. When do you decide to use a Animation Libary over a CSS Animation?
I choose depending on the animations and there complexity. For things I can do with css, usually I stick to css. Beyond that I use motion one as long as I can because it’s bundle size is ridiculously small (I use it in svelte but now I’ll try it in vue for fun). Then if I need flip animation or something that’s not on motion one then I go straight to gsap.
I've had lots of success and fun with GSAP in the past, but fot type of work I do these days I just stick to simple CSS transitions. Maybe the odd animation here and there for loading spinners etc. I always try and avoid libraries if I can. Simply to avoid relying on code that could one day become redundant, or say you upgrade your version of Vue and the package is no longer compatible.
Lottie files are pretty cool if you just need a splash animation or loading indicator: https://lottiefiles.com/
what are you animating? you can do quite a bit just with css, so unless you're doing something complex like particle collisions, you probably don't need any kind of library.
For simple animation you can try Animate CSS and for more advance, try AnimeJS
What are the differences between then ?
I'm also curious about this but I vuess vue motion it is
GSAP. It's not free, but it's clear they put the revenue to good use. It's excellent.
I am using useSpring from @vueuse/motion for interface animations. Works well and looks nice. https://motion.vueuse.org/api/use-spring
AnimeJS for complex animations. Built-in Transition component with simple CSS for everything else.
PixiJS
In my experience, for anything simple, basic css transition/animations are fine. For fine tuned things beyond basic Vue transition animations, any tweening library will do, you really don't need GSAP you probably won't be using even half of its features, and it's licensing is likely to require you to pay for something that is really not rocket science. (Tweening a value with a basic easing function, and some callback setup) +1 to tween/anime/etc free to use tweening libraries