How can I create advanced animations using GSAP?

How can I create advanced animations using GSAP?

You can create advanced animations in GSAP by using timelines, easing functions, and various tween properties. What specific effect are you looking to achieve?

I want to create a bouncing ball animation that also changes color.

You can achieve that by using the gsap.to() method for the bouncing effect and gsap.to() again for the color change. Would you like a code example?

Yes, please provide a code example!

Sure! Here's a simple example:

const ball = document.querySelector('.ball');

gsap.to(ball, { 
  y: -100, 
  duration: 0.5, 
  ease: 'bounce.out', 
  repeat: -1, 
  yoyo: true 
});

gsap.to(ball, { 
  backgroundColor: 'red', 
  duration: 0.5, 
  repeat: -1, 
  yoyo: true 
});

This will create a bouncing ball that changes color between its original color and red.