Loop animation hook

Custom hook for creating looping animations with configurable timing and transitions. Features a reusable hook that handles animation loops with customizable duration and easing.

Dependencies

Interaction Type

npx shadcn add @skiper-ui/skiper62

import { useLoop } from "@/components/v1/skiper62";

const CustomLoopExample = () => {
  const { key } = useLoop(2000); // 2 second delay

  const items = ["Item 1", "Item 2", "Item 3"];
  const currentItem = items[key % items.length];

  return (
    <div className="flex h-screen items-center justify-center">
      <motion.div
        key={key}
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 1.2 }}
        transition={{ duration: 0.5 }}
      >
        {currentItem}
      </motion.div>
    </div>
  );
};

Source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

License & Usage:

• Free to use and modify in both personal and commercial projects.
• Attribution to Skiper UI is required when using the free version.
• No attribution required with Skiper UI Pro.