This week we're going to deconstruct and build a really cool image mask effect I saw in this Chevy Tahoe ad on Twitter.

I'm a firm believer that broadcast ads and even banner ads have some of the best motion-graphics work. 

Like everyone, I largely find commercials annoying, but chances are there was a very talented animator hired to create them. 99.99% of viewers won't appreciate the extra time they put in to get things just right.

I'd encourage you to watch ads with the perspective of "how would I build that?". You may find yourself surprisingly intrigued, inspired, and perhaps challenged.

When I saw this ad I was instantly impressed by how slick it was. It had some effects that I commonly see on award-winning sites. As I sat there fiddling with the playhead scrubbing back and forth it took a bit of time to figure out what was going on.

In the end we're talking about just 1 second of animation, but the timing is delicious and setting things up in HTML and CSS always presents a challenge.

I figured if this was something that I had to put some time into figuring out it would make for a good lesson for you.

I hope you enjoy!


Finished Demo


As with all front-end things there are usually multiple ways to approach these types of effects.

After building this lesson I had the idea that you probably could do the same thing with one element that has the clip-path applied and uses a background image that changes size. 

Also, SVG could be cool and would also bring with it some natural responsiveness. Might be worth exploring someday. 

As always, my passion and focus is on the GreenSock code and the end result. I think this came out pretty cool and I hope you find a way to incorporate it in your own projects!


A NEW TWIST

Taking the concept of "mask-up / scale-down" one step further I created this demo below.

Notice how I'm using a circular clip-path to reveal the shrinking "GSAP" text.

This is another example of "getting big results with just a little code".

It's literally just 3 tweens!

This is why I'm so adamant about learning the basics of timelines in GSAP 3 Express.

They empower you to do so much!

Even after all my years of creating GSAP animations, it's these simple animations that bring me the most joy.




Get 6 Months of Unlimited Access for only $29

Consider what you've learned from just simple lesson. Imagine what I could show you in 6 months!

Unlock all my premium GreenSock training and get new lessons weekly.

The Creative Coding Club offers the most comprehensive GreenSock training available. 

From basics, to scroll-driven animations, advanced tips and tricks, and SVG animation, you'll learn it all!

Purchasing Power Parity options available in most countries.

Join Today