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!

Framer motion animates smoothly based on tailwind classes, but not when specifying values using animate