The Weekly Animation - 1

In my journey to add tools to my belt as a web developer, and find fun and nice looking projects to do on the way, I came across two courses on Frontend Masters that caught my eye.

Creative Coding by Matt DesLauriers and SVG essentials and animations by Sarah Drasner

When completing them I was stoked and excited to apply my new knowledge on something practical, so I went to dribbble and looked for a nice animation to remix. As I learned a lot along the way, and plan to keep doing a similar process for some time so I decided to share my experiences on a weekly installment, following Shawn's learn in public approach.

Today, we're going to be remixing this animation From Lukas Kus

Prerequisites

I've used GreenSock's Draggable, and TweenMax DrawSVG products, which are usually paid, but can be used freely on codepen. I also used Adobe Illustrator for preparing the svg, but any editor that allows creating and exporting SVGs.

That said, some basic knowledge on greesock and css animations could be helpful along the way, but it's not something too big to worry about.

What We'll be doing

The setup

The first thing I did to work on the animation based off the original video was recreating all of the elements I can distinguish from it. I identified 2 main groups, the outer circles that load across the center and the ripple.

Making sure everything it's present and correctly grouped simplifies the work a lot on the animation phase, so make sure you're setting everything up properly! (I had to start from scratch 3 times after animating because I forgot a piece of the svg, so do as I say not as I do). Also, don't worry about hiding things in this phase, that's something we can handle later.

Make sure you export the image as an SVG, and copy and paste it into codepen, you should have something similar to this

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 400">
    <g id="all">
      <g id="circles">
          <path class="cls-1 fill-circle" d="M357.26,187.32a165.19,165.19,0,1,1,0-5" transform="translate(-19.57 -10.81)" />
          <path class="cls-2 outer-circle" d="M357.26,187.32a165.19,165.19,0,1,1,0-5" transform="translate(-19.57 -10.81)" />
        <path class="cls-1 inner-circle" d="M357.26,187.32a165.19,165.19,0,1,1,0-5" transform="translate(-19.57 -10.81)" />
      </g>
      <g id="ripple">
        <circle id="center" class="cls-3" cx="337.73" cy="171" r="10" />
        <circle class="cls-4" cx="337.7" cy="171.07" r="30" />
        <circle class="cls-4" cx="337.7" cy="171.03" r="50" />
      </g>
    </g>
  </svg>

The friendlier the names of your layers and group in Illustrator are, the easier it would be to work with them.

I like to separate my css from the html, so i'd paste whatever is in the <style> tag embedded in the svg on the css tab

.cls-1 {
  fill: none;
  stroke: #000;
  stroke-width: 0.5px;
}

.cls-1,
.cls-2 {
  stroke-miterlimit: 10;
}

.cls-2 {
  fill: none;
  stroke: #ff911f;
  stroke-linecap: round;
  stroke-width: 20px;
}

.cls-3,
.cls-4 {
  fill: #ffa20a;
}

.cls-4 {
  opacity: 0.3;
}

svg {
  width: 500px;
  height: 500px;
}

The animation

Here's where most of the hard work happens, since you'll do a lot of tweaking to the animation times/easings/durations. First of all, start by isolating parts and animating them individually. This will make it easier to debug if something breaks or doesn't work as expected.

Make sure you included the GSAP, DRAWSVG and Draggable plugins into codepen JS Tab

Step By Step

The inner circle only job is to go around the main fill color, we can achieve this behavior using DrawSVG plugin.

tl.from(innerCircle, 1.2, {
  drawSVG: "0%",
  easing: Power2.easeOut
})

At the same time, the fill circle animation grows to fill the line boundaries, we use the scale transform property. Make sure transformOrigin is set to 50% 50%, else, your animation may start from the top left corner.

.from(
  fillCircle,
  1,
  {
    scale: 0,
    opacity: 0,
    transformOrigin: "50% 50%",
    easing: Power2.easeIn
  }
)

The animation from the outer circle is similar to the inner one, but it starts from a different point and fades in as it moves instead of just filling the path. For this, we can use the fromTo GSAP method, that takes an initial and ending argument.

.fromTo(
    outerCircle,
    1.2,
    { drawSVG: "20% 30%", easing: Power2.easeOut, opacity: 0 },
    { drawSVG: "99.9% 100%", easing: Power2.easeIn, opacity: 1 },
  )

With the DrawSVG plugin, you can fill just a section of the path by indicating two separate values within it, "20% 30%" represents that we just want to fill 10% of the path then.

We also don't want to close the whole path and make it disappear, since it will aid the animation of the ripple appearing, that's why we leave it on 99.9% for the second value.

.to(
    innerCircle,
    0.7,
    { drawSVG: "100% 100%", easing: Power2.easeInOut }
  );

Once we finish with the animation for the outer path, the thinner path also closes

.staggerFrom(
    ".cls-4, .cls-3",
    0.5,
    {
      scale: 0,
      transformOrigin: "50% 50%"
    },
    0.1
  )
  .staggerTo(
    ripple,
    0.5,
    {
      opacity: 0
    },
    0.1
  )

With staggerFrom and staggerTo we can animate all matching query items with a delay from one another, that's really useful for adding a ripple effect once our paths close. Here we're making the circles grow and then disappear.

At this point our whole animation should be close to done, but something is wrong. Things appear one after another, and that's not how motion works. That's why we need to tweak the starting times for our animations in order for them to look natural. Feel free to take a look at the codepen and copy the values I've used for this. If you have any doubts on how this work, you can look at this page

Next Steps

At this point our animation should look pretty smooth, but in order for it to completely replicate the video we need to add some interaction to it. This would be covered on the next post in this series, since I don't want the experience to be overwhelming.

Extra practice

Feel free to change the values of the timings and animation properties and see if you get to a result you like more! (If you do so, send me a link. I'd love to see it!)

Go on dribbble and find an animation you would like to remix, if you're having trouble reach out to me and maybe it could become a Weekly Animation blog as well!

If you liked this post, make sure to leave a like and follow me on DEV.TO and twitter as @Stiv_ml