My face with a Photoshop cutout filter applied to it

KATRINEMARIE.ME

Welcome. Click on an image below to read about the given project.

Back to homepage

Greensock Leaves

12. March 2016

See the Pen Greensock leaves by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.

A demo of some falling leaves I made with GSAP TweenMax.

I had this animation in mind for a long time, but I always planned to attempt it with CSS animations.

After I got started with GSAP I quickly realized how much easier it was to use, and although the primary benefits of GSAP, for me at least, lie in making SVG animations cross-browser compatible, and complex animations easier to adjust - it can also make simpler animations such as this one much simpler to plan out and execute. It took literally no time to code this.

I stagger through the leaves (three in total), and use two timelines - one to move the leaves down and another to rotate them, set to different durations in order to introduce some randomization into the movements. And that's basically it.

Back to homepage