Animating Z-Indexes with Greensock Animation Platform, CSS & HTML5

In this post

Code samples using GSAP (Greensock Animation Platform) for animating z-indexes on several layers to create an army of the walking dead.

Animating z-indexes 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 animating z-indexes alternatives.

Animating Z-IndexesGSAP 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.

Animating Z-Indexes to Create HTML5 Plants vs. Zombies Parade

animating z-indexes
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

Animating Z-Indexes the HTML

The CSS for Animating Z-Indexes

The JS



Animating Z-Indexes with Greensock Animation Platform, CSS & HTML5 Click To Tweet