React Animations
in Minutes

Learn & Use Motion from Examples to Craft Awesome Experiences

Explore animations

Minutes to learn, not hours of struggling 🧑‍💻

Every frontend developer's secret struggle: creating those smooth, professional animations that make websites pop. It's the skill that separates good sites from unforgettable ones - and you're minutes away from mastering it.

Watch real animation code, understand instantly 💡

We'll show you the actual code behind the magic. One look and you'll say 'That's all?!' 🤯 Transform your websites from static to stunning in minutes, not hours. No Stack Overflow or AI deep dives needed - just quick wins and smooth animations that'll make butter jealous! 🧈✨

Animations

Try on the left. Inspect on the right.

Try it.

Number Flow

Fluid digit transitions

import { useEffect, useState } from "react";
import { Pause, Play, X } from "lucide-react";
import { AnimatePresence, motion } from "framer-motion";

type TimerState = "idle" | "running";

const useTimer = (initialSeconds: number) => {
   const [seconds, setSeconds] = useState(initialSeconds);
   const [state, setState] = useState<TimerState>("idle");

   useEffect(() => {
      if (state === "running") {
         const timerId = window.setInterval(() => {
            setSeconds((s) => {
               if (s > 0) {
                  return s - 1;
               }
               clearInterval(timerId);
               return s;
            });
         }, 1000);

         return () => clearInterval(timerId);
      }
   }, [state]);

   const reset = () => {
      setSeconds(initialSeconds);
      setState("idle");
   };

   const toggle = () => {
      setState((s) => (s === "running" ? "idle" : "running"));
   };

   return { seconds, state, reset, toggle };
};

const TimerDisplay = ({ minutes, seconds }: { seconds: string[]; minutes: string[] }) => (
   <div className="flex flex-row items-end gap-1">
      <div className="flex flex-row items-center justify-center font-extralight text-white leading-none text-3xl">
         {/* AnimatePresence: Enables exit animations and handles component mounting/unmounting */}
         {/* AnimatePresence with mode="popLayout":
          *
          * Problem it solves:
          * Without popLayout, React first removes old element, then adds new one sequentially
          *
          * How popLayout works:
          * 1. Keeps old number in place while it fades out
          * 2. Simultaneously brings in new number
          * 3. Both animations run in parallel
          * 4. Prevents layout shifts during number transitions
          *
          * Result: Smooth number changes without jarring layout updates
          */}
         <AnimatePresence mode="popLayout" initial={false}>
            {minutes.map((m, index) => (
               // motion.div: Base component for animations
               // initial: Starting animation state
               // animate: Final animation state
               // exit: State when component is removed
               // transition: Controls animation timing and physics
               <motion.div
                  key={`m:${m}:${index}`}
                  className="tabular-nums flex flex-row"
                  initial={{ y: -10, opacity: 0 }}
                  animate={{ y: 0, opacity: 1 }}
                  exit={{ y: 10, opacity: 0 }}
                  transition={{ type: "spring", bounce: 0.3 }}
               >
                  {m}
               </motion.div>
            ))}
         </AnimatePresence>
         <div className="relative bottom-0.5">:</div>
         <AnimatePresence mode="popLayout" initial={false}>
            {seconds.map((s, index) => (
               <motion.div
                  key={`s:${s}:${index}`}
                  className="tabular-nums flex flex-row"
                  initial={{ y: -15, opacity: 0 }}
                  animate={{ y: 0, opacity: 1 }}
                  exit={{ y: 15, opacity: 0 }}
                  transition={{ type: "spring", bounce: 0.25 }}
               >
                  {s}
               </motion.div>
            ))}
         </AnimatePresence>
      </div>
   </div>
);

const TimerControls = ({
   onToggle,
   onReset,
   state,
}: {
   onToggle: () => void;
   onReset: () => void;
   state: TimerState;
}) => {
   return (
      <div className="flex flex-row gap-2">
         <button
            className="w-8 h-8 rounded-full bg-white/20 flex justify-center items-center"
            onClick={onToggle}
         >
            {state === "running" ? (
               <Pause color="white" strokeWidth={1} fill="white" size={20} />
            ) : (
               <Play color="white" strokeWidth={3} fill="white" size={15} />
            )}
         </button>
         <button
            className="w-8 h-8 rounded-full flex justify-center items-center"
            onClick={onReset}
         >
            <X color="white" strokeWidth={3} fill="white" size={20} />
         </button>
      </div>
   );
};

const Timer = () => {
   const INITIAL_SECONDS = 60 * 5;
   const { seconds, state, reset, toggle } = useTimer(INITIAL_SECONDS);

   const formattedTime = {
      minutes: Math.floor(seconds / 60)
         .toString()
         .padStart(2, "0")
         .split(""),
      seconds: (seconds % 60).toString().padStart(2, "0").split(""),
   };

   return (
      <div className="w-full h-full flex flex-col justify-center items-center p-4">
         <div className="bg-black w-[17rem] flex flex-row justify-between items-center rounded-ten py-3.5 px-5">
            <TimerControls
               onReset={() => reset()}
               onToggle={() => toggle()}
               state={state}
            />
            <TimerDisplay
               minutes={formattedTime.minutes}
               seconds={formattedTime.seconds}
            />
         </div>
      </div>
   );
};

export default Timer;

Tabs

Partial reveal: Text gradually unveils in color

Duration

0.5 s

import { History, FileText, List } from "lucide-react";
import React, { forwardRef, useEffect, useRef, useState } from "react";
import { cva, VariantProps } from "class-variance-authority";

type Tab = {
   id: string;
   icon: React.ReactNode;
   name: string;
};

const tabVariants = cva(`flex items-center gap-1.5 px-3 rounded-ten`, {
   variants: {
      variant: {
         primary: `py-3`,
         background: `py-3.5`,
      },
   },
   defaultVariants: {
      variant: "primary",
   },
});

const TabButton = forwardRef<
   HTMLButtonElement,
   {
      tab: Tab;
      isActive?: boolean;
      onClick?: () => void;
      ref?: React.RefObject<HTMLButtonElement>;
   } & VariantProps<typeof tabVariants>
>(({ tab, isActive, onClick, variant }, ref) => (
   <li>
      <button
         ref={ref}
         className={tabVariants({ variant })}
         onClick={onClick}
         tabIndex={isActive ? -1 : 0}
         aria-selected={isActive}
         role="tab"
      >
         {tab.icon}
         {tab.name}
      </button>
   </li>
));

TabButton.displayName = "TabButton";

const Tabs = ({
   defaultTab = TABS[0].id,
}: {
   defaultTab?: string;
}) => {
   const [activeTab, setActiveTab] = useState(defaultTab);
   // clipPath: Controls the visible area of the background layer
   // Initially hides the black background (100% hidden from right side)
   const [clipPath, setClipPath] = useState<string>("inset(0px 100% 0 0% round 10px)");
   const containerRef = useRef<HTMLDivElement>(null);
   const activeTabElementRef = useRef<HTMLButtonElement>(null);

   // Recalculate clip-path when active tab changes
   useEffect(() => {
      const container = containerRef.current;
      const activeTabElement = activeTabElementRef.current;

      if (container && activeTabElement) {
         setClipPath(calculateClipPath(activeTabElement, container.offsetWidth));
      }
   }, [activeTab]);

   return (
      <div className="relative box-border w-fit h-fit text-menu flex items-center justify-center rounded-ten overflow-hidden">
         {/* Layer 1 (Front): Normal tabs */}
         <ul className="flex justify-center items-center">
            {TABS.map((tab) => (
               <TabButton
                  key={tab.id}
                  ref={activeTab === tab.id ? activeTabElementRef : null}
                  tab={tab}
                  onClick={() => setActiveTab(tab.id)}
               />
            ))}
         </ul>
         {/* Layer 2 (Background): Animated black background
          *
          * How it works:
          * 1. We have two identical sets of tabs:
          *    - Front layer: Normal tabs (gray)
          *    - Back layer: Black tabs (this layer)
          *
          * 2. The black layer is like a mask:
          *    - Initially, it's completely hidden
          *    - When you click a tab, it reveals only that tab's area
          *    - clip-path property acts like a window, showing only specific parts
          *
          * 3. Animation process:
          *    - Click "Tasks" tab
          *    - Black background smoothly slides to reveal only "Tasks" area
          *    - Creates illusion of tab switching with a sliding effect
          *
          * Think of it like a black paper behind a gray paper,
          * where we cut a moving window to show the black paper beneath
          */}
         <div
            className="absolute w-full top-0 left-0 h-full"
            style={{
               transition: `clip-path 0.5s ease-in-out`,
               clipPath,
            }}
            ref={containerRef}
         >
            <ul className="flex justify-center items-center w-full text-white bg-black h-full">
               {TABS.map((tab) => (
                  <TabButton
                     key={tab.id}
                     tab={tab}
                     variant="background"
                     onClick={() => setActiveTab(tab.id)}
                  />
               ))}
            </ul>
         </div>
      </div>
   );
};

const calculateClipPath = (
   activeElement: HTMLButtonElement,
   containerWidth: number,
): string => {
   const { offsetLeft, offsetWidth } = activeElement;
   const clipLeft = (offsetLeft / containerWidth) * 100;
   const clipRight = 100 - ((offsetLeft + offsetWidth) / containerWidth) * 100;

   return `inset(0 ${clipRight.toFixed()}% 0 ${clipLeft.toFixed()}% round 10px)`;
};

const TABS: Tab[] = [
   {
      id: "1",
      icon: <History size={20} />,
      name: "Activities",
   },
   {
      id: "2",
      icon: <List size={20} />,
      name: "Tasks",
   },
   {
      id: "3",
      icon: <FileText size={20} />,
      name: "Notes",
   },
];

export default Tabs;

Feedback

Dynamic form morph

Duration

0.3 s

Detail Zoom

Seamless element morph

Campaign Ideas02/02/2024

Project Plan12/03/2024

Client Meeting22/04/2024

Shopping List30/05/2024

Duration

0.3 s

Text

Handwritten flow effect

Duration

3 s

Smart Copy

Success state transform

Duration

0.3 s

Navigation

Expand-on-click labels

Duration

0.8 s

Onboarding

Smooth carousel swipe

Step

Try Out the Animations

Click on any animation to see it in action.

Duration

0.3 s

Smart Button

Elastic load transition

Duration

0.5 s

Expanding Icons

Slide-and-bump expansion

Duration

0.8 s

Popup

Elegant slide-up reveal

Duration

0.8 s

Settings

Blur-backed drawer

Duration

0.5 s

Swipe Actions

Gesture-based delete

Messages

Philip

"Great job – your effort made a big difference!"

Delete

Luna

"I love your creativity and new ideas!"

Delete

John

"Thanks for responding so quickly and getting things done!"

Delete

Duration

0.3 s

Animated Check Box & Switch

Path-tracing checkmark

Duration

0.3 s

Progress Text

Gradient fill flow

QuickAnimation

Hey there 👋 I'm Lukas, the indie developer behind QuickAnimation.
I'd like to show you how easy it is to add Apple-like smoothness to your web animations using React and Framer Motion. Whether you're just starting out or have some experience, I believe anyone can make their websites pop with life and interactivity — in moments!

Tech stack used in examples

Animations are made with the Framer Motion library for smooth, interactive movement. The code is written in React withTypeScript for reliable typing, styled with Tailwind CSS for a clean, adaptable look, and uses Lucide for sharp, customizable icons.

Simple pricing.

Pay once, keep forever. Simple.

Essential Motion

$9.99

Kickstart with 15 essential animations for dynamic interfaces.

Number Flow

Tabs

Feedback

Detail Zoom

Text

Smart Copy

Navigation

Onboarding

Smart Button

Expanding Icons

Popup

Settings

Swipe Actions

Animated Check Box & Switch

Progress Text

Support indie developer

Ninja Motion Master 🥷

$14.99

Unlock every animation, now and in the future – a lifetime of creativity.

Number Flow

Tabs

Feedback

Detail Zoom

Text

Smart Copy

Navigation

Onboarding

Smart Button

Expanding Icons

Popup

Settings

Swipe Actions

Animated Check Box & Switch

Progress Text

Support indie developer️

Every new animation- Lifetime

React Animations
in Minutes

Learn & Use Motion from Examples to Craft Awesome Experiences

Minutes to learn, not hours of struggling 🧑‍💻

Every frontend developer's secret struggle: creating those smooth, professional animations that make websites pop. It's the skill that separates good sites from unforgettable ones - and you're minutes away from mastering it.

Watch real animation code, understand instantly 💡

We'll show you the actual code behind the magic. One look and you'll say 'That's all?!' 🤯 Transform your websites from static to stunning in minutes, not hours. No Stack Overflow or AI deep dives needed - just quick wins and smooth animations that'll make butter jealous! 🧈✨

Animations

Try on the left. Inspect on the right.

Try it.

Number Flow

Tabs

Feedback

Detail Zoom

Text

Smart Copy

Navigation

Onboarding

Smart Button

Expanding Icons

Popup

Settings

Swipe Actions

Philip

Luna

John

Animated Check Box & Switch

Progress Text

Tech stack used in examples

Simple pricing.

Pay once, keep forever. Simple.

Any question?

Reach me out hello@quickanimation.dev

React Animations in Minutes

Learn & Use Motion from Examples to Craft Awesome Experiences

Minutes to learn, not hours of struggling 🧑‍💻

Every frontend developer's secret struggle: creating those smooth, professional animations that make websites pop. It's the skill that separates good sites from unforgettable ones - and you're minutes away from mastering it.

Watch real animation code, understand instantly 💡

We'll show you the actual code behind the magic. One look and you'll say 'That's all?!' 🤯 Transform your websites from static to stunning in minutes, not hours. No Stack Overflow or AI deep dives needed - just quick wins and smooth animations that'll make butter jealous! 🧈✨

Animations

Try on the left. Inspect on the right.

Try it.

Number Flow

Tabs

Feedback

Detail Zoom

Text

Smart Copy

Navigation

Onboarding

Smart Button

Expanding Icons

Popup

Settings

Swipe Actions

Philip

Luna

John

Animated Check Box & Switch

Progress Text

Tech stack used in examples

Simple pricing.

Pay once, keep forever. Simple.

Any question?

Reach me out hello@quickanimation.dev

React Animations
in Minutes