framer-motion simple banner

After installing the dependency framer-motion, our application now has access to a special motion component for every HTML and SVG element, for instance motion.div, motion.h1 etc. These new elements work just like their counterparts, but have been given extra superpowers to move.

They have props allowing developers to :

Animate
Add drag, pan, hover and tap gestures
Respond to gestures and elements entering the viewport with animation
Deeply animate throughout React trees via variants

And much more.

In our animated banner example, the initial and animation fields are set to declare a translation animation along the x axis.

we're setting "x" field to indicate where the animation starts and ends, using another animation 'rotate' to add a little rotation to the banner as it moves along the screen.

initial={{ 
          x: -600, 
          rotate: -5, 
        }} 
        animate={{ 
          rotate: 5, 
          x: 3000, 
          boxShadow: "18px 18px 0 rgba(0, 0, 0, 0.2)", 
        }}

In this case, the code specifies a transition type, but if none is set then Framer Motion fallbacks to "smart defaults".

If we had used Spring, the translation would have moved the element from left to right and added a "bounce" when reaching its target state, like a spring! Spring Animations are physics based, closely mirroring the way objects really move.

But instead we used Tween which is a keyword for tweening which itself means inbetweening. It's the process of generating images that go between keyframes, the beginning and end of a transition. It gives a smooth look.

transition={{ 
          type: "tween", 
          ease: "easeInOut", 
          repeat: Infinity, 
          repeatType: "loop", 
          repeatDelay: 30, 
          duration: 12, 
          delay: 2, 
        }}

Here's the whole component for reference.

<motion.div
        style={{
          height: "3rem",
          width: "24rem",
          background: "linear-gradient(90deg,#009688 0%,#c6ff00 75%)",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}

        initial={{
          x: -600,
          rotate: -5,
        }}
        animate={{
          rotate: 5,
          x: 3000,
          boxShadow: "18px 18px 0 rgba(0, 0, 0, 0.2)",
        }}

        transition={{
          type: "tween",
          ease: "easeInOut",
          repeat: Infinity,
          repeatType: "loop",
          repeatDelay: 30,
          duration: 12,
          delay: 2,
        }}
      >
        Read My Blog for more cool stuff
      </motion.div>

Enjoy Framer-Motion and Experiment as this animation library plays well with React.