Animate on Multiple Z-Indexes with Greensock Animation Platform [ Zombie Parade ]

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

Greensock Animation PlatformI 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 Greensock Animation Platform 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.

If you liked this article on animating with the Greensock Animation Platform you may also be interested in my post on Parallax Design.