Svg Animation Anime.Js

1. Exploring Anime.js With An Example Site Animation Project
2. What's New In Anime.js V4 · Juliangarnier/anime Wiki · Github
1. Javascript Based Animations Using Anime.js Code Tutorials
2. Anime.js Svg Morph
   1. Spinners Svg Animation Experiment (animejs) By Ilya Tsuprun On Dribbble
   2. Back2school Svg Animation W/ Anime.js
3. Anime.js 3.0 Released: New Animation Options, New Documentation Website
   1. Letter Animations Using Javascript Library Anime.js
4. How To Create The Snake Highlight Animation With Anime Js

This is the second part of our tutorial series, where we create a real-time game using supabase and Vue. In this part, we will learn how to create a fancy cyberpunk-style animated logo using SVGs and anime.js. If you haven't already, check out the first post in the series, so you know what we are making!

Posts in this series . 1. Build a real-time game with supabase and Vue In part one we cover an introduction to the project, the initial project setup and styles. 👉 2. Building an animated SVG logo with anime.js In part two we learn how to create our animated SVG logo 👉

Here's a little vid of what we will be making. As you can see, we have a cool-looking logo for our game. It has a fancy build-in animation and then a secondary idle animation where the letters flicker to give it that dodgy neon sign effect.

Exploring Anime.js With An Example Site Animation Project

Before we dive into the code, a few considerations need to be considered when designing a logo like this in Figma that make it much easier to animate once you have exported it.

When we originally designed the logo, we used a combination of rectangles to create the orange arrow and the blue lines above the logo. However, we realised this was a bad idea when we thought about how the logo should animate.

If we use paths rather than rectangles, we can use stroke-dashoffset to create a line drawing effect where the path is gradually drawn from one end to the other. Unfortunately, we can't do this with different SVG element types.

What's New In Anime.js V4 · Juliangarnier/anime Wiki · Github

This means you will need to pick up the pen tool in Figma to recreate the shape as a single path using stroke to fill in the colour.

By default, when you write text in Figma and export it as an SVG, you will be presented with a single path element with all the letters combined. Of course, this is usually fine, but it means you are stuck if you want to animate the letters individually.

Unfortunately, Figma doesn't make this as easy as it should be. There's no native way to take a text layer and split it into multiple new layers for each letter. You could create a new layer manually for each letter, but then you have to space them manually, and no one wants to do that!

Javascript Based Animations Using Anime.js Code Tutorials

When you export your logo as an SVG, it will be a big file with many elements. To help us animate each layer, it's helpful to know what each SVG element is. To do this, you should give each layer in Figma a sensible name and select the Include id attribute option in the SVG export options.

Instead of randomly generated IDs, each layer will have an ID, including your layer name, making it much easier to know what you are looking at.

Okay, so now that we've talked enough about Figma, it's time to take our logo and bring it to life as a Vue component.

Anime.js Svg Morph

First things first, export the logo as an SVG from Figma. Once you have the .svg file, open it in VSCode to see its markup. We are now going to plop that markup into a new Vue component in

; simply dump all the SVG markup into the template tag. Because we have ESLint and Prettier setup, it should be auto-formatted nicely when you save too! How handy! It should look something like this once you are done:

Now that we have our Logo component, let's temporarily add it to our page so we can see what we are dealing with.

Anime.js • Javascript Animation Engine

Finally, in the designs, to really push home that dodgy neon sign story, the eagle-eyed amongst you may have noticed the logo is always a bit wonky. We can do this easily by adding a Tailwind rotate class:

Lovely! Our static logo looks good and is in a nice reusable component we can splash around all over the place. It's time to get animating!

While you can get a long way with CSS animations, you will still need to reach for a library for more complex animations. Luckily we are spoilt for choice, and we have excellent options like GSAP, Motion One and our favourite Anime.js.

Svg Morphing In React Js With Anime Js

Why do we like Anime.js so much? Well, it is really powerful and can animate essentially anything you can think of, but it remains a tiny bundle size of 6.9kb minified compared to GSAP's 26.13kb.

You could achieve the same effect with most animation libraries, but we like keeping our projects lean, so the small bundle size is an excellent plus for us.

First, let's create an animation for each of the letters. If you followed the Figma advice earlier, you should see that each letter for TICTACGO has its own path. This will allow us to create a nice staggered animation where the animation for each letter is slightly delayed.

Svg Animation With Anime.js. Anime.js Is A Very Powerful And…

Here we create a new anime.js animation targeting all letters in the letters group. We have set up animations for their scale and opacity to go from 0 to 1, and by setting the delay using a function, we incrementally delay the animation of each letter by 100ms.

It's pretty cool but different from what we were going for! The letters fly in from the left-hand side rather than fading in and scaling in place. This is because, by default, transforms for SVGs are performed relative to the parent SVG rather than the individual element. Luckily we can adjust this using the CSS

Have you ever struggled to animate SVG elements using CSS transforms? 🤷‍♀️ The transform origin is relative to the parent SVG making it hard to transform. transform-box: fill-box; makes the transform origin relative to the child elements rather than the parent.#webdev #css #svg pic.twitter.com/hq8BDdt3hB— (@io) November 2, 2021

Spinners Svg Animation Experiment (animejs) By Ilya Tsuprun On Dribbble

Now it's time to begin animating some of the other elements. Let's start with the orange arrow by adding the following to the

Here we create two new anime.js animations. The first targets the main orange line path and creates a draw in effect by animating its

Helper to return the exact length of the path so we can go from having a completely blank path to a completely filled in path. If you want to learn more about this technique, check out this great CSS Tricks Article: https://css-tricks.com/svg-line-animation-works/

Back2school Svg Animation W/ Anime.js

The second animation targets the arrow tips of the orange arrow. These are separate from the main path element, so they needed to be animated in after the path was fully drawn. We use the delay property to make sure they appear at the right time. When creating animations like this, you will spend much of your time tweaking timing values to make things look just right!

It will be cool if the blue lines above the main logo text draw in next, following on from the orange arrow.

The blue line consists of multiple parts that need to be animated one after the other. Anime.js provides a timeline function that can make this sort of animation easier by chaining different animations onto each other.

Anime.js 3.0 Released: New Animation Options, New Documentation Website

This fades in the first blue square after a delay of 600ms. We can then create the next animation, which will be triggered as soon as the first is finished to draw in the thinner part of the blue line:

Function. This offset allows you to adjust when this part of the timeline starts playing. For example, for the first thick line, we pass a value of

This says, rather than starting exactly when the previous animation finishes, start 500ms before it's finished. Again, this provides a way of tuning your timeline to make it look perfect.

Letter Animations Using Javascript Library Anime.js

To be honest, we find that when you start using offsets with timelines, it can get pretty hard to wrap your head around, and often you are better off just creating several individual animations and adjusting the delay manually yourself. It was worth demonstrating the timeline functionality though!

So far, we have a logo that builds in, starting with the letters and following around the edge. The last part missing animation are the three lines and dot to the left of TICTACGO. Let's sort that out! Update your

Here we create four new animations to create a staggered flash effect, starting with the rightmost rectangle and ending with the little left square. We achieve this by animating the

Best Of Js • Anime.js

Property from 0.27, to 1, and back to 0.27 again. Here, instead of using the timeline, create the stagger effect by manually setting the delay of each animation.

We want the logo to look like an old flickering neon sign, so after the build-in animation happens, we should make a few of the letters flicker. Create a new function in the

Here we target two letters and create a flicker effect by animating the opacity of the letters very quickly. Then, we add loads of keyframes into the

How To Create The Snake Highlight Animation With Anime Js

Yay, our fantastic animated logo component is almost there! There is just one more step we need to take before we are finished. It would be useful to toggle the build animation on and off because we are unlikely to want the logo to animate in like