Framer Motion is an excellent library, but what if you want lighter alternatives or have limited bundle size? This blog explores ways to create beautiful, interactive UI animations without relying on Framer Motion—perfect for React, vanilla JS, and even static sites.

1. Pure CSS Animations (Beginner)

CSS transitions and keyframes are the simplest way to add smooth effects with no JavaScript at all.

<style>
.button {
  transition: transform 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
}
</style>

<button class="button">Hover Me</button>

2. JavaScript-Based Animation (Intermediate)

If you want more control (like triggering on scroll or click), JavaScript can help.

<div id="box" style="width:100px;height:100px;background:red;"></div>

<script>
  const box = document.getElementById('box');
  box.addEventListener('click', () => {
    box.style.transition = 'transform 0.5s ease';
    box.style.transform = 'rotate(45deg)';
  });
</script>

3. React Transition Group (Advanced)

React Transition Group gives you controlled mount/unmount animations.

import { CSSTransition } from 'react-transition-group';

function MyComponent() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button onClick={() => setVisible(v => !v)}>Toggle</button>
      <CSSTransition in={visible} timeout={300} classNames="fade" unmountOnExit>
        <div className="box">Animated Box</div>
      </CSSTransition>
    </>
  );
}

With CSS:

.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity 300ms; }
.fade-exit { opacity: 1; }
.fade-exit-active { opacity: 0; transition: opacity 300ms; }

4. GSAP (GreenSock Animation Platform)

GSAP is a high-performance animation library that works across frameworks and browsers.

import gsap from 'gsap';

gsap.to('.box', {
  x: 100,
  opacity: 0.5,
  duration: 1,
  ease: 'power2.out'
});

5. Animate on Scroll (AOS)

AOS is a lightweight scroll animation library with zero JS setup required in React.

<div data-aos="fade-up">Scroll to animate me</div>

Conclusion

Whether you're just starting with CSS transitions or building complex UIs with GSAP, you don't need Framer Motion to create stunning animations. Each method here has trade-offs:

• Use CSS for fast, simple transitions.
• Use JavaScript or React Transition Group for component state-based animations.
• Use GSAP or AOS for advanced scroll or timeline-based effects.