preface

I often see heroes doing incredible animations in SVG on Codepen, and I always wonder how they work. I always think it takes a thorough understanding of SVG and drawing the SVG patterns myself to make it work.

But that’s not the case. Here’s a simple trick that lets you quickly create an SVG animation!

Open Codepen and click the Build button to animate a house and make it smoke! 🏭

codepen

Look for nice SVG patterns

Since we can’t draw it ourselves, we’ll have to look for existing libraries. There are many SVG libraries, such as Flaticon, IconFont, Iconfinder, or Icons8, which offer free SVG patterns.

Analyzing SVG patterns

Open DevTool and observe the SVG pattern. You should see the following result:

In element, path and circle are SVG DOM elements, representing lines and circles in AN SVG pattern, respectively.

For example 🌰 :

<path d="M 10 25 L 10 75 L 60 75 L 10 25">
Copy the code

The content of d in the code above: M stands for moving the pen to (10, 25), then L draws a line to (10, 75), and finally goes back to the starting point and draws a triangle.

Using Devtool, we can see which part of the pattern each path corresponds to:

Now that we know which part of the pattern each element corresponds to, we can work with the DOM element that we want to animate!

TimelineLite/TimelineMax tools

Using CSS or JavaScript to do your own animations with id and className alone is still quite difficult and, more importantly, time-consuming

So we have to borrow the tools, the Timeline (Lite | Max) with TweenMax is well-known GreenSock Animation Platform (hereinafter referred to as GSAP) launched the Timeline you can create (Timeline) as Animation or other containers of the Timeline, This makes overall animation control and precise time management easy.

GSAP even provides Ease Visualizers to show the effects of each Ease Function, along with code:

codepen

A few simple lines of code can do the following:

Overhand GSAP

The GSAP API is very powerful 👍, and there are related communities: official website documents, forums, TimelineMax Chinese manual

In the initial house construction 🌰, I mainly used from and staggerFrom of TimelineMax, these two apis only need to set the initial value, it will finish the twill animation within the specified time:

  tl.from("#House > rect:nth-child(24)".1, {
      scaleX: 0.transformOrigin: "center".ease: Power2.easeOut
    })
Copy the code

In this step, we will use CSS Selector #House > rect: nth-Child (24), starting at scaleX 0, with center as the starting point, using power2.easeout, to revert to the original state in one second, and perform the tween animation.

    .staggerFrom(
      ["#House > path:nth-child(34)"."#House > path:nth-child(32)"].0.8,
      {
        scaleY: 0.transformOrigin: "bottom".ease: Bounce.easeOut,
        stagger: 0.2
      },
      0.Scene1 + = "0.5"
    )
Copy the code

StaggerFrom is similar to from, except that you can put multiple CSS selectors in from at once, and use the stagger property to set the interval at which the selectors in the array should appear.

Please refer to the official documentation for detailed API parameters

Going back to SVG, with devtool, it’s very easy to get a CSS Selector for an element in SVG. Go to the Element panel, right-click the DOM element, go to Copy -> Copy Selector, You can copy that element’s CSS Selector directly:

Now that we can get a CSS Selector for any part of SVG and know how to use the GSAP API for tween animation, it’s time to put it together!

Let’s adjust the basic layout first. When you place SVG directly in blank Html, most of the graphics will be close to the top left corner of the page. We can use margin: 0 auto to center it and make it look nice. We add a button to the page to invoke the animation:

<! --html part-->
<button onclick="animateBike()"> Build! </button>
<! --css part-->
<style>
#Capa_1 {
  margin: 0 auto;
  display: block;
  width: 256px;
  height: 100%;
}
</style>
Copy the code

Then we use the staggerFrom function provided by TimelineMax, devtool to find the wheel parts of the scooter, copy their CSS Selector, put it into the staggerFrom function parameter, and set the scale of both x and y axes to start at 0. Increase by Center, use Bounce. EaseOut ease function, and use stagger: 0.2 as the time difference between the four selectors for the tween animation:

  const tl = new TimelineMax();
  tl.staggerFrom(
      [
        "#Capa_1 > g > path:nth-child(1)"."#Capa_1 > circle:nth-child(7)"."#Capa_1 > path:nth-child(6)"."#Capa_1 > circle:nth-child(5)"].1,
      {
        scaleY: 0.scaleX: 0.transformOrigin: "center".ease: Bounce.easeOut,
        stagger: 0.2})Copy the code

With a few lines of code, we can get our scooters moving!

codepen 

Tween is a term used to describe a frame-by-frame sequence, sometimes called "middle". Where one action leads to the next to produce a fluid action.Copy the code

Improve the animation

You can think of TimelineMax as a timeline, where animations execute in a specified order, staggerFrom allows multiple DOM elements to start at the same time in a slightly different order, and we can set flags to specify which animations to wait for before proceeding to any other animation.

Finally, get creative and use various apis to play a one-two punch 👊 :

codepen

Conclusion 🎉

Are you excited to see this?

All in all, I found it interesting myself and hope it will be more or less helpful to those who read this article.

Finally, I’d like to share a cool demo from my article cover

Refer to the article 📜

GreenSock Animation Platform

How to Create Beautiful SVG Animations Easily