---
title: "Modern Animation Techniques for Web"
date: "2023-08-20"
excerpt: "Explore the latest animation techniques to create engaging web experiences"
---

# Modern Animation Techniques for Web

Animation can significantly enhance user experience when used appropriately. This post explores modern animation techniques for web development.

## CSS Animations

CSS animations are powerful and performant:

\`\`\`css
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
\`\`\`

## Scroll-Triggered Animations

Animations that trigger as users scroll down the page create engaging experiences:

\`\`\`javascript
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
    }
  });
});

document.querySelectorAll('.animate-on-scroll').forEach(element => {
  observer.observe(element);
});
\`\`\`

## GSAP (GreenSock Animation Platform)

GSAP is a professional-grade animation library:

\`\`\`javascript
// Simple animation
gsap.to(".box", {
  duration: 1,
  x: 100,
  y: 100,
  rotation: 360,
  ease: "elastic"
});

// Timeline for sequence
const tl = gsap.timeline();
tl.to(".box1", { duration: 0.5, x: 100 })
  .to(".box2", { duration: 0.5, y: 50 })
  .to(".box3", { duration: 0.5, rotation: 45 });
\`\`\`

## Framer Motion

Framer Motion is a React animation library that makes it easy to create complex animations:

\`\`\`jsx
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.5 }}
>
  Content that animates in and out
</motion.div>
\`\`\`

## Lottie Animations

Lottie allows you to use After Effects animations on the web:

\`\`\`jsx
import Lottie from 'lottie-react';
import animationData from './animation.json';

function Animation() {
  return <Lottie animationData={animationData} />;
}
\`\`\`

## Best Practices

1. **Performance**: Always consider performance impact
2. **Purpose**: Use animations with purpose, not just for decoration
3. **Timing**: Keep animations short (200-500ms) for UI elements
4. **Accessibility**: Respect user preferences with `prefers-reduced-motion`
5. **Progressive Enhancement**: Ensure content is accessible without animations

## Conclusion

Modern web animations can create delightful user experiences when implemented thoughtfully. By using the right techniques and following best practices, you can create engaging animations that enhance rather than detract from your website.