Frame by frame animations for web (Tutorial)

over 2 years ago from , Design Lead at Vincit California

I just learned about a method to use frame by frame animations on web and thought it was pretty cool, so I'm going to show you guys how I did it.

TLDR if you don't code: You can use frame by frame animations on web if you send the developer a spritesheet and tell them to use GSAP SteppedEase.

First of all, here's what I made with this technique:

Vincit Nav Menu

Let's dive in

Ok so on a high level, it works by animating a spritesheet containing the animation frames, using background-position. There are a few libraries / programs that make this pretty easy.

The first is GSAP. If you're not familiar with it, it's a javascript animation library. It's super useful for all types of animations, so even if you don't end up trying frame by frame animations it's still worth checking out.

The second is TexturePacker (there are multiple programs that can do this, I just chose this one). You can use this to create your spritesheet so you don't have to do it manually.

Ok here are the steps to implement this:

  1. Create your animation using anything that can export an image sequence. I used After Effects and exported out a .png sequence since I needed a transparent background.

  2. Open your sequence with TexturePacker and create a spritesheet. Make sure it's 1 row only. By default it might try to create multiple rows out of your sequence but you can change that by clicking "Advanced Settings" and setting the Max Width to a high enough number to fit everything on one row.

  3. Add your spritesheet as a background image on an element in your site. Make sure that element is sized to the dimensions of 1 frame out of your animation.

  4. Add GSAP to your project (the TweenMax script includes everything you need)

  5. Use the "SteppedEase" feature to animate through your spritesheet. The code will look something like this:

TweenMax.to(#your-element, 1, { backgroundPosition: "-500px 0px", ease: SteppedEase.config(5) })

To get that background position number, use the total width of your spritesheet, minus the width of 1 frame.

Enter your total number of frames, minus 1, as the config number.

Now just call that function on click or whatever event you like.

Thats it! I hope you found it helpful. If you try it out, post some cool stuff you made with it!