gettemplategettemplate|Documentation

Animation Templates

4 animated components using Framer Motion and GSAP

Animation Templates (4)

Add life to your UI with these animated components.

Available Animations

TemplateTypeLibrary
Rotating ClockInteractiveCSS + JS
Tags InputInputFramer Motion
Horizontal Grid GalleryGalleryFramer Motion
Dark Masonry GalleryGalleryCSS Grid

Tech Stack

  • Framer Motion - Declarative animations
  • GSAP - Complex timelines
  • CSS Animations - Simple effects

Example

import { motion } from "framer-motion";

const AnimatedCard = () => (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    whileHover={{ scale: 1.05 }}
    className="p-6 bg-white rounded-xl shadow"
  >
    Hover me!
  </motion.div>
);