The neural network of MotionProvider - CAS orchestrates complex animation workflows across components with surgical precision. Experience animation control at scale:

Let's Dive!

I will explain everything for you to control all your animations using centralized control like a senior frontend engineer. First, take a look at the code shown below:
<MotionImage />
import MotionImage from "@/components/MotionProvider/motion-image";
import { FC } from "react";

export const Example: FC = () => {
  return (
    <MotionImage
      pieces={144}
      isDynamicallyQueued
      animationDuration={1}
      delayLogic="sinusoidal"
      transition="smooth"
      imageUrl={ADD_YOUR_IMAGE_HERE}
      wrapperClassName="w-full lg:h-96 h-60"
      animations={["fadeIn", "filterBlurIn"]}
    />
  )
}

You may remember <MotionImage /> component. If you did not check it out yet, please click here to go <MotionImage /> documentation page . Now, let's see how is the result:

bash
I'm hearing your,
lametiations. Before explaining how it works, I want you to press the buttons below then check the image once again after you pressed. If you get it right, then take a look at this code piece:
useAnimation()
const [stopAnimation, setStopAnimation] = useState<boolean>(false);
const [reverseAnimation, setReverseAnimation] = useState<boolean>(false);

const config = useAnimation({
  stopAnimation,
  reverseAnimation,
  recallDuration: 1,
});

const handleReverse = () => {
  setReverseAnimation((prev) => !prev);
  setStopAnimation(false);
};

const handleStop = () => {
  setStopAnimation(true);
  setReverseAnimation(false);
};

This logic is simply all your need in your entire project to control your animations. At runtime, all the changes you made logic and passing it to any Motion Provider component, you will gain a centralized control for your all components.

Here the same logic that I created random animations by rolling a dice in Motion Image Engine mounted to the <MotionImage /> component explains what you saw above in image:

<MotionImage />
import { FC, useState } from "react";
import { useAnimation } from "@/components/MotionProvider/hooks/use-animation";
import MotionImage from "@/components/MotionProvider/motion-image";

export const Example: FC = () => {
  const [stopAnimation, setStopAnimation] = useState<boolean>(false);
  const [reverseAnimation, setReverseAnimation] = useState<boolean>(false);

  // Here we initialize the useAnimation hook to centralize the animations. 
  // USE THIS LOGIC IN ANY CASE WHERE YOU WANT TO CONTROL THE ANIMATIONS FOR PERFORMANCE!   
  const config = useAnimation({
    stopAnimation,
    reverseAnimation,
    recallDuration: 1,
  });

  // Keep the logic as shown while you reversing the animation.
  const handleReverse = () => {
    setReverseAnimation((prev) => !prev);
    setStopAnimation(false);
  };

  // Keep the logic as shown while you stopping the animation.
  // It will work only when the state momently reversed or while any animation in use. 
  const handleStop = () => {
    setStopAnimation(true);
    setReverseAnimation(false);
  };

  return (
    <div className="w-full lg:h-96 h-60">
      <div className="absolute top-12 right-6 z-50 items-start  justify-center flex flex-col gap-2">
        <button onClick={handleStop} className="bg-black px-4 py-2 rounded-lg">
          {config.isAnimationStopped ? "Start" : "Stop"}
        </button>
        <button onClick={handleReverse} className="bg-black px-4 py-2 rounded-lg">
          {config.reverse ? "Start" : "Reverse"}
        </button>
      </div>
      <MotionImage
        pieces={144}
        isDynamicallyQueued
        // Pass the centralized animation config into any MotionProvider component
        controlConfig={{
          isControlled: true,
          ...config,
        }}
        animationDuration={2.1}
        delayLogic="sinusoidal"
        transition="fadeSlide"
        imageUrl={YOUR_IMAGE_URL}
        wrapperClassName="w-full h-1/2"
        animations={["rotateFlipY","rotateRoll"]}
      />
    </div>
  );
};

React Elemental Approach

Let's take a look at another approach using
useAnimation()
. This time we will work on
<MotionContainer />
. Let's render one
<div />
element and work on it.
bash
I want you to press the buttons below, once again then check the container.

If you get it right, then take a look at this code piece explaining what is happening on this container:

<MotionContainer />
import { FC, useState } from "react";
import { useAnimation } from "@/components/MotionProvider/hooks/use-animation";
import MotionContainer from "@/components/MotionProvider/motion-container";

export const Example: FC = () => { 
  // Change the state manually because I am exhausted of writing documentation.
  // But maybe you can buy me a coffee and I can continue with the documentation :)
  // Guys really I spent  +60 hours on this with 100% effort and I am not earning anything from this...
  // So If you support me then we can make the internet looking better!
  const [reverseAnimation, setReverseAnimation] = useState<boolean>(false);

  // We set just reverseAnimation, because we does not want to stop it.
  const config = useAnimation({
    stopAnimation: false,
    reverseAnimation,
    recallDuration: 1,
  });

  //In this time we do not need to stop the animation so we do not need to set stopAnimation.

  return (
      <MotionContainer
        elementType="div"
        {...config}
        configView={{ once: true, amount: "some" }}
        mode={["rotateFlipX", "fadeDown"]}
        transition="smooth"
        duration={1}
        className="w-24 h-24 rounded-lg bg-gradient-to-r from-cyan-400 to-blue-500"
        delay={0}
      />
  )
}

The same logic goes for all Motion Provider components as well. So after learning the fundemental concepts on this page, you will be able to build a centralized animation system and control all your animations from a single place! I will be sharing lots of examples in my posts so If you want to get the full picture, you can visit my blogs daily.

Control Flow Mechanics

CAS Hook Anatomy

Performance Optimization

Best Practices