Animating Z-Indexes with GSAP, CSS & HTML5

In this post

Using the Greensock Animation Platform or GSAP to animate several layers to create an army of the walking dead from Plants Vs. Zombies.


Animating with GSAP or the Greensock Animation Platform offers up a lot of creative options for animating with CSS, HTML5 and javascript. Animations that used to only be achievable with a program like Flash or After Effects are possible by using modern day code and a beefy JS library with multiple animation alternatives.

GSAP isn’t built with any other programming dependencies. It doesn’t require any reference too any other JavaScript libraries, but plays nicely with most including jQuery making it a formidable platform for animation. It’s fast loading, adapts well to many variations of JS, it’s built to handle SVGs, HTML5, CSS and is cross browser compatible down to Internet Explorer 6.

HTML5 Plants vs. Zombies Parade

The following animation was achieved using GSAP and CSS to animate several different layers by z-index. Each layer has it’s own trajectory and speed. Layers consist of multiple pngs floating over each other to create the illusion of movement.

Each layer can be disabled in the html to see how the different elements interact with each other or rather over each other. By forking the pen itself you can quite easily alter the speed, direction, graphics, etc, etc.

See the Pen Plants Vs. Zombie Parade by Nate Balcom (@nbalcom) on CodePen.


HTML5 Plants vs. Zombies Parade on Codepen

The HTML

The CSS

The JS

Comments

comments

Animating Z-Indexes with GSAP, CSS & HTML5 Click To Tweet
 

 

 

 

 

(I'll never share your email address and I'll never spam you.)