Framer motion animates smoothly based on tailwind classes, but not when specifying values using animate
If you’re using Framer motion with Tailwind CSS, you may have noticed that animations based on Tailwind classes work smoothly, but when specifying values using the animate
property, the animation may appear janky or not work at all. This can be frustrating, especially when you want precise control over your animations. In this blog post, we’ll explore two possible solutions to this problem.
Solution 1: Use Transition Property
The first solution is to use the transition
property instead of the animate
property. By specifying the desired CSS properties and durations, you can achieve smooth animations.
Here’s an example:
import { motion } from "framer-motion";
const MyComponent = () => {
return (
Hello, World!
);
};
In this example, the opacity
property is animated from 0 to 1 with a duration of 0.5 seconds. You can customize the CSS properties and durations to fit your needs.
Solution 2: Use Keyframes
The second solution is to use keyframes to define your animations. By specifying the intermediate states of your animation, you can achieve smoother transitions.
Here’s an example:
import { motion } from "framer-motion";
const MyComponent = () => {
const fadeIn = {
hidden: { opacity: 0 },
visible: { opacity: 1 },
};
return (
Hello, World!
);
};
In this example, we define two states: hidden
and visible
. The opacity
property is animated from 0 to 1 with a duration of 0.5 seconds. You can define more intermediate states and customize the durations to create complex animations.
By using either of these solutions, you can achieve smooth animations with Framer motion, even when specifying values instead of relying on Tailwind classes.
Remember to experiment with different CSS properties, durations, and keyframes to create the desired effects for your animations.
That’s it for this blog post! We hope these solutions help you achieve smooth animations with Framer motion and Tailwind CSS. Happy coding!
Leave a Reply