Let’s Create a CSS Glitch Animation from Scratch

Video Tutorial

Getting Started

CSS Animations are one of the skills you need to acquire during your career as a Front End or Full Stack Developer it is being used by the biggest teams around the globe, where you can make any element, image or SVG to move, dance or to do your specific moves which you can use it on different variety of things.

In this tutorial, we are going to walk through the process of making a complete Glitch Animation using the Standard CSS animation and using the SASS Preprocessor(SCSS). For the seek of this tutorial, we are going to use code pen as the development environment (platform) just to make it simple and accessible for everyone.

You are required to know the basic HTML & CSS syntax plus the SASS preprocessor (precompiler) or any other preprocessor (for ex: LESS) which can help us visualize the animation much better and much easier.

You might also need to take a look at the clip and animation CSS properties before starting, so you would have the basic knowledge to follow the tutorial with no hassles.

go to Codepen

Check out:

Standard CSS Animation.

CSS Clip Property

Text Design

Depending on the text or logo you want to add the glitch animation on you have to find the right values for it, since animating it simply means that you change the position and size of it over time with some other effects, in this case, I’m just going to animate the GLITCH text to make it as simple as possible for you understand the main idea behind it.

Create the HTML Container and the animation element which is the main is where all the magic is going to happen.

<div class="container">
  <div class="glitchy" data-text="GLITCH">GLITCH</div>
</div>

We set the data-text attribute to the same text we want to animate because later when we try to add the CSS before & after selectors we have to be able to access the actual text we want to animate therefore we use an attribute (variable) to hold the text data, you still can hard code it.

Let’s add some style to the container and the glitchy text.

//HTML and Body make it take the full width and height 
html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
}
//Container Center the children using flexbox desing
.container {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
}

Now the text should look a bit better centered vertically and horizontally but still some changes need to be done first.

.glitchy {
  font-size: 12em;
  color: #fff;
  font-family: Oxygen, sans-serif;
  font-weight: 600;
  position: relative;

  &::before, &::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
  }
}

We add the .glitchy class with the before and after selectors since we need them to create two more texts identical to the target text we want to animate, and as I said before here we are accessing the target text using the data-text attribute we have assigned to the target element on the DOM using the attr function.

Also, we need to use an absolute position alongside centering it regarding the parent position which is, in this case, is the .glitchy that is why we set the .glitchy text to a relative position so we can position the children relatively to it and then the after and before selectors will have a 0 from the top and the left which basically means in the center.

Also, don’t forget about setting the background color to black (#000) so the text would look real and the animation can work smoothly or whatever background color you initially choose to use.

Now we have to give each selector (before and after) a specific shadow color to use it when we animate the text, if you are already familiar of a glitch animation you would have noticed that there will be a green and magenta (rose) color when the glitch is happening so it would look real and much better, all we need to do is set the shadow of before selector to green and the after selector to magenta then change the dimension of the text and position over time when we try to animate it.

&::before {
  left: $offset1;
  text-shadow: -3px 0 $highlight1;
  clip: rect(20px, 800px, 170px, 0px);
  animation: glitchy-anim 2.5s infinite linear alternate-reverse;
}
&::after {
  left: $offset2;
  text-shadow: -3px 0 $highlight2;
  clip: rect(108px, 800px, 170px, 0px);
  animation: glitchy-anim2 2.5s infinite linear alternate-reverse;
}

Take a look now on the preview tab on code pen, you will notice a green and a magenta shadows shows up on the borders of the logo, then all that left for us to do is add the animation.

Notice how we have used the offset there it is a variable that we have declared earlier on the CSS code, this is are variables on the sass environment.

For the clip we use the rest function which basically gonna clip the text from the left to right and top to bottom depending on the pixel values we put there, this value depends on the text you want to animate and it’s size so make sure to play with the values till you get the best ones for your text otherwise the animation won’t work because the main animation idea is based on the clip property by changing which part is visible and which part is not, in this case, we are going to animate the top and bottom parts take a look again at the logo you see that the green shadow is in the top and the magenta is in the bottom so sometimes we show the top part and some others we show the bottom and so on and so forth, we cycle the animation.

And finally, we put the animation name which we haven’t created yet with a 2.5s second duration of each iteration and infinite with a linear function.

Glitchy Animation

We are going to use SASS @mixins which are basically a function that runs and returns a specific property, which let us run a for loop for the number of frames we need to run on the animation and clip and many other things.

Here is a full tutorial explains SASS and CSS Preprocessors in general.

@mixin keyframes($n: 24, $index:0) {
  @for $i from $index through $n {
    $rand1: unquote(round(random() * 150) + "px");
    $rand2: unquote(round(random() * 300) + "px");
    $keyframeSel: percentage($i/$n);
    #{$keyframeSel} {
      clip: rect($rand1, 9999px, $rand2, 0);
    }
  }
}

the mixin takes two arguments (n: number of frames & index: which is the starting index of the first frame) changing the values will let you get a new animation combination which is pretty good in terms of making it look unique.

We simply loop on the number of the frames and create two random numbers using the random() method which returns a random number between 0–1 and we make it a string and finally we remove the quotes using the unquote function since CSS properties doesn’t accept quoted values (the clip property).

the keyframeSel represent the current keyframe percentage between (0% and 100%) we get it by dividing the current index and the total number of frames. Finally, we return the current keyframe with a clip property using the help of the two random values, you can create as many random values as you want and include them on the clip property to make it look even more glitchy.

Now we only need to create the animation from the keyframes using the mixin that we have created above.

9999px for making sure that the logo will of it appear on the page since the second arguments control the left to right clip and we randomize the top and the bottom since we have already set up the selectors to work with it.

@keyframes glitchy-anim {
  @include keyframes(24, 0);
}
/*Two diffrent animations*/  
@keyframes glitchy-anim2 {
  @include keyframes(30, 2);
}

We create two different animations each one is going to be used on one selector (before & after) so the animation would look smooth and real.

Now simply refresh or wait for the page to refresh and you will see the animation starts to work properly, and here you go you have got a smooth Glitch Animation, Pretty Cool.

Here is the Full Animation Pen: CodePen Embed - Glitchy Logo html, body { width: 100%; height: 100%; background-color: #000; overflow: hidden; } $highlight1: #49FC00; $highlight2…codepen.io

What’s Next

From here you can take this animation and try to improve by providing more animation keyframes and add even more complicated and advanced animation techniques to make it look even more glitchy then it already looks.

No Comments Yet