Animations and Transitions: Adding Life to Your UI

Animations and transitions can bring your user interfaces to life, making them more engaging and interactive. In this article, we'll explore how to use AkarUI's animation components to create dynamic and engaging user interfaces.

Introduction to Animation Components

AkarUI offers several animation components that you can use to add life to your interfaces:

Setting Up Your Environment

To use AkarUI's animation components, you'll need to install the following dependencies:

npm install framer-motion

Basic Usage

Here's an example of how to use the TextReveal component:

import { TextReveal } from '@/components/ui-components/text-reveal';

export default function MyComponent() {

return (

<div>

<h1>Welcome to My App</h1>

<TextReveal text="This text reveals word by word" className="text-xl" />

</div>

);

}

Creating Custom Animations

You can also create your own custom animations using Framer Motion. Here's a simple example:

import { motion } from 'framer-motion';

export default function MyComponent() {

return (

<motion.div

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

transition={{ duration: 0.5 }}

>

<h1>Welcome to My App</h1>

<p>This content fades in and slides up when it mounts.</p>

</motion.div>

);

}

Conclusion

AkarUI's animation components make it easy to add life to your interfaces. Whether you're using our pre-built components or creating your own, you can create dynamic and engaging user interfaces with minimal effort.