Animated Group

Galleries 132

About

A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Group to your project and fits it to your theme.

Code

How Animated Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { AnimatedGroup } from "@/components/ui/animated-group";

function AnimatedGroupPreset() {
  return (
    <AnimatedGroup
      className="grid grid-cols-2 gap-4 p-8 md:grid-cols-3 lg:grid-cols-4"
      preset="scale"
    >
      <img
        src="https://images.beta.cosmos.so/fc6fdd93-552c-47e6-98aa-b8fb3ba070a2?format=jpeg"
        alt="impressionist painting, uploaded to Cosmos"
        className="h-auto w-full rounded-[4px]"
      />
      <img
        src="https://images.beta.cosmos.so/cb674d14-ebd1-4408-bab1-79df895017b6?format=jpeg"
        alt="impressionist painting, uploaded to Cosmos"
        className="h-auto w-full rounded-[4px]"
      />
      <img
        src="https://images.beta.cosmos.so/e5a6c3ed-82ad-4084-9a11-1eccd7bc91aa?format=jpeg"
        alt="impressionist painting, uploaded to Cosmos"
        className="h-auto w-full rounded-[4px]"
      />
      <img
        src="https://images.beta.cosmos.so/4d02a1e7-d1f2-4575-86a9-bed243e59132?format=jpeg"
        alt="impressionist painting, uploaded to Cosmos"
        className="h-auto w-full rounded-[4px]"
      />
    </AnimatedGroup>
  );
}

function AnimatedGroupCustomVariants() {
  return (
    <AnimatedGroup
      className="grid grid-cols-2 gap-4 p-8 md:grid-cols-3 lg:grid-cols-4"
      variants={{
        container: {
          hidden: { opacity: 0 },
          visible: {
            opacity: 1,
            transition: {
              staggerChildren: 0.05,
            },
          },
        },
        item: {
          hidden: { opacity: 0, y: 40, filter: "blur(4px)" },
          visible: {
            opacity: 1,
            y: 0,
            filter: "blur(0px)",
            transition: {
              duration: 1.2,
              type: "spring",
              bounce: 0.3,
            },
          },
        },
      }}
    >
      <img
        src="https://images.beta.cosmos.so/fc6fdd93-552c-47e6-98aa-b8fb3ba070a2?format=jpeg"
        alt="impressionist painting, uploaded to Cosmos"
        className="h-auto w-full rounded-[4px]"
      />
      <img
        src="https://images.beta.cosmos.so/cb674d14-ebd1-4408-bab1-79df895017b6?format=jpeg"
        alt="impressionist painting, uploaded to Cosmos"
        className="h-auto w-full rounded-[4px]"
      />
      <img
        src="https://images.beta.cosmos.so/e5a6c3ed-82ad-4084-9a11-1eccd7bc91aa?format=jpeg"
        alt="impressionist painting, uploaded to Cosmos"
        className="h-auto w-full rounded-[4px]"
      />
      <img
        src="https://images.beta.cosmos.so/4d02a1e7-d1f2-4575-86a9-bed243e59132?format=jpeg"
        alt="impressionist painting, uploaded to Cosmos"
        className="h-auto w-full rounded-[4px]"
      />
    </AnimatedGroup>
  );
}

function AnimatedGroupCustomVariants2() {
  return (
    <AnimatedGroup
      className="grid h-full grid-cols-2 gap-8 p-12 md:grid-cols-3 lg:grid-cols-4"
      variants={{
        container: {
          visible: {
            transition: {
              staggerChildren: 0.05,
            },
          },
        },
        item: {
          hidden: {
            opacity: 0,
            filter: "blur(12px)",
            y: -60,
            rotateX: 90,
          },
          visible: {
            opacity: 1,
            filter: "blur(0px)",
            y: 0,
            rotateX: 0,
            transition: {
              type: "spring",
              bounce: 0.3,
              duration: 1,
            },
          },
        },
      }}
    >
      <div key={1}>
        <img
          src="/national_geographic_logo.svg"
          alt="Apple Music logo"
          className="h-auto w-full"
        />
      </div>
      <div key={2}>
        <img src="/sony_logo.svg" alt="Chrome logo" className="h-auto w-full" />
      </div>
      <div key={3}>
        <img
          src="/strava_logo.svg"
          alt="Strava logo"
          className="h-auto w-full"
        />
      </div>
      <div key={4}>
        <img
          src="/nintendo_logo.svg"
          alt="Nintendo logo"
          className="h-auto w-full"
        />
      </div>
    </AnimatedGroup>
  );
}

export default {
  AnimatedGroupPreset,
  AnimatedGroupCustomVariants,
  AnimatedGroupCustomVariants2,
};