Animate on Multiple Z-Indexes with GSAP [ Zombie Parade ]

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

I did a post about animating z-indexes with GSAP on 8.28.16 when I first demoed the Zombie Parade. GSAP or GreenSock Animation Platform is a great tool for animating with CSS and HTML.

By utilizing classes each piece of your animation can controlled and assigned to a different z-index/ layer of your animation. In the GSAP animation above classes are being manipulated at different speeds and directions. There are 7 layers in the involved above plants, clouds, ground, fence, graveyard, trees and moon all live on different z-indexes.

This is where the magic happens. Here’s where you alter the direction and speed of your layers.