GreenSock Animation Platform (GSAP)

GSAP is an awesome JavaScript library that lets designers and developers easily create dynamic timeline-based animations, without needing to be JavaScript wizards.

Getting Started

Let's kick things off by adding GSAP to your project. Grab the CDN link for TweenMax from the GSAP website. CDN, short for Content Delivery Network, means you don't have to host the JS files on your site. Paste the link in a <script> tag at the bottom of your HTML file, and you're good to go!

<script>
 src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"
</script>

Understanding Tweens

Now, what are Tweens? They're the magic behind GSAP animations. You don't need to be a JS expert to use them. Check out this example of changing a rectangle's colour and position. Remember, TweenLite is your GSAP go-to.

TweenLite.to("#rectangle", 2,{
  left: 100,
  top: 75,
  backgroundColor: "#000000",
  ease: Power4.easeIn
});

Timeline Animations

Tweens are cool for one-off animations, but if you want a sequence, timelines are your best pals. Start with

var tl = new TimelineLite;
tl.to("#rectangle", 2, { x: 100, y: 75, backgroundColor: "#000000", ease: Power4.easeIn })
  .to("#rectangle", 1, { scaleX: 1.5, scaleY: 1.5, backgroundColor: "#454545", ease: Back.easeOut.config(1.7)});

Now, you've got a sequence! Experiment and create more complex animations by adding new elements.

Animating Multiple Objects

Timelines aren't just for one object. Spice things up by animating multiple objects, like this rectangle and a circle

var tl = new TimelineLite;
tl.to("#rectangle", 2, { x: 100, y: 75, backgroundColor: "#000000", ease: Power4.easeIn })
  .to("#rectangle", 1, { scaleX: 1.5, scaleY: 1.5, backgroundColor: "#454545", ease: Back.easeOut.config(1.7)})
  .from("#circle", 1, { opacity: 0 });

Watch the circle appear after the rectangle's grand performance!

DrawSVG Plugin

Ready for some premium GSAP action? The DrawSVG plugin makes SVG manipulation a breeze.

var unicorndraw = new TimelineLite();
unicorndraw.from("#unicorn1, #unicorn2, #unicorn3, ...", 3, { drawSVG: "0", delay: "1" });

This brings your SVG to life! Experiment with values to create unique animation styles.

Final Thoughts

GSAP empowers you to craft stunning timeline animations, even if you're not a JS expert. This guide covered just a snippet of what GSAP can do. Dive into GreenSock's site, explore, and have fun creating captivating animations! 🚀