Advanced Animations

Delving into advanced animations, our goal today is to get our banner to scale and rotate, but not just that. We want the banner to appear out of nowhere, from nothing seemingly, and then to rotate and scale up, almost reaching out of the screen.

The useMotionValue hook from the Framer-Motion library along with useTransform hook creates this effect.

First we can just use the variants object capability that comes with Framer-Motion to rotate.

const AdvancedVariants = {
    wildIn: {
      x: x,
      rotate: 0,
    },
    wildOut: {
      x: x,
      rotate: 360,
    },
  };
...
  variants={AdvancedVariants}
      initial="wildIn"
      animate="wildOut"
      transition={{
        type: "tween",
        ease: "easeInOut",
        repeat: Infinity,
        repeatType: "mirror",
        duration: 6,
      }}

The AdvancedVariants rotation continues through 360 and has a tween easeInOut animation with a 6 second duration.

This looks good but it does not transform the banner's appearance to appear as nothing and then almost reach out of the screen as it rotates up and then suddenly transform back down to nothing.

To do that we will need useMotionValue and useTransform hooks together.

The useMotionValue hook along with the useTransform hook gives us a completely separate rotation animation, one with a scale animation aspect. This animation rotates our banner differently than the AdvancedVariants version.

  let x = window.innerWidth / 2;
  const rotate = useMotionValue(0);
  const scale = useTransform(rotate, [0, 180], [0, 4]);

The above animation stops scaling at 180 degrees into the rotation and scales up to a value of 4.

Two completely different animations working together now, one dependent on the other. As one banner animation finishes it's scaling up and rotation, the other banner animation continues rotating for a short time, giving a somewhat jarring and startling effect both when animating in and out.

Go to the Advanced Animation example for this blog here

The code is here