Check out a free preview of the full SVG Essentials & Animation, v2 course

The "GSAP Monster Demo" Lesson is part of the full, SVG Essentials & Animation, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Sarah uses a CodePen to demonstrate how to utilize the TweenMax library.


Transcript from the "GSAP Monster Demo" Lesson

>> Sarah Drasner: I'm gonna teach you a little bit about how to work with GreenSock with this Monster, because I don't like live coding very much. So this simple TweenMax to eye, so he blinks his eye. He's gonna teach you how to blink his eye. And if you have Two Tweens, and a eye, and antenna, they both happen at the same time.

Now let's say, I have a time line and I apply I changed TweenMax to tl, they go one after each other, they follow each other in time. Then I'm gonna wrap it in a function and call that function, and it's the same thing they're functionally equivalent it's a little bit more code.

But the point is, I can add another function where he flaps his wings, and add it to the timeline in any order I want. And I have him blinking his antenna, and he's flapping. So then he's gonna say goodbye to you, bye! Okay, that's our little Monster. I am also gonna live code for you, because I like you.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now