<MotionQueue />

Advanced animation sequencer for coordinating complex animation timelines across multiple elements.

Basic Usage

import MotionQueue from "@/components/MotionProvider/motion-queue";
import { FC } from "react";

export const Experiment: FC = () => {
    return (
      <MotionQueue
        elementType="div"
        duration={1}
        isDynamicallyQueued
        animations={[
          {
            mode: ["filterBlurIn", "fadeRight"],
            duration: 1,
            transition: "smooth",
          },
        ]}
      >
        <h2 className="pt-12 lg:text-3xl font-bold">
          Hello World
        </h2>
      </MotionQueue>
    );
}

Delay Logic Types

//use predefined delay logic inside MotionQueue as follows 
isDynamicallyQueued + delayLogic: "linear" | "exponential" | "sinusoidal"

//or create custom delay logic inside MotionQueue as follows (assuming you have an index variable)
isDynamicallyQueued  + customDelayLogic = (index: number) => {
  return index * 0.5

//or use fixed delay logic with this
delayByElement: 1

Custom delay functions receive the element index and base duration

Component Props

PropTypeDefaultDescription
animations
AnimationQueueAnimationProps[]
requiredArray of animation configs for each child
children
React.ReactNode[]
requiredArray of elements to animate
delayLogic
'linear' | 'exponential' | 'sinusoidal' | 'custom'
'linear'Algorithm for calculating staggered delays
duration
number
0.5Base duration for delay calculations (seconds)
isDynamicallyQueued
boolean
falseEnable dynamic delay calculation
delayByElement
number
-Fixed delay per element (overrides logic)
customLogic
(index: number) => number
-Custom delay calculation function

Best Practices

Performance Tips