Chapter 400: Keyframes

Core Idea

keyframes are only to be used in to() tweens.

Code Examples

// timeline
let tl = gsap.timeline();
tl.to(".box", {
    x: 100
  })
  .to(".box", {
    y: 100
  })
  .to(".box", {
    x: 0
  })
  .to(".box", {
    y: 0
  });

// Array-based keyframes
gsap.to(".box", {
  keyframes: {
    x: [0, 100, 100, 0, 0],
    y: [0, 0, 100, 100, 0],
    ease: "power1.inOut"
  },
  duration: 2
});

• What it demonstrates: typical usage of Keyframes in a GSAP animation.

Key Takeaways

1. keyframes are only to be used in to() tweens.