GSAP Keyframes — Multi-Step Animation Sequences
In this tutorial, you will learn about GSAP Keyframes. We cover key concepts, practical examples, and best practices to help you master this topic.
GSAP keyframes allow defining multiple animation states in an array, creating complex multi-step sequences without nested timelines.
What You'll Learn
By the end of this guide, you will create keyframe arrays with multiple states, use keyframe objects for per-property timing, mix absolute and relative keyframe values, add easings per keyframe, and sequence complex motion paths.
Basic Keyframes
gsap.to('.box', {
keyframes: [
{ x: 100, y: 50, duration: 0.4 },
{ x: 200, y: 0, duration: 0.3 },
{ x: 300, y: 100, duration: 0.5 }
],
ease: 'power1.inOut'
});
Per-Property Keyframes
gsap.to('.box', {
keyframes: {
x: [0, 100, 200, 300],
y: [0, 50, 0, 100],
opacity: [1, 0.5, 1, 0.3],
duration: 2,
ease: 'power2.out'
}
});
Easing Per Keyframe
gsap.to('.box', {
keyframes: [
{ x: 100, ease: 'power2.out' },
{ x: 200, ease: 'bounce.out' },
{ x: 300, ease: 'elastic.out(1, 0.5)' }
],
duration: 2
});
Bouncing Ball with Keyframes
gsap.to('.ball', {
keyframes: [
{ y: 200, duration: 0.6, ease: 'power2.in' },
{ y: 0, duration: 0.4, ease: 'power2.out' },
{ y: 150, duration: 0.5, ease: 'power2.in' },
{ y: 0, duration: 0.3, ease: 'power2.out' },
{ y: 100, duration: 0.4, ease: 'power2.in' },
{ y: 0, duration: 0.2, ease: 'power2.out' }
]
});
Common Mistakes
1. Mixing Array and Object Format
Keyframes must be either an array of state objects or an object with arrays per property. Do not mix formats.
2. Not Setting Duration
If duration is not in the keyframe array, GSAP uses the tween's total duration divided equally.
3. Overlapping Values
Keyframes animate from the previous keyframe's final value. Ensure continuity between frames.
4. Missing Ease in Keyframes
Ease set on the tween applies to the whole sequence, not per keyframe. Set ease inside each keyframe separately.
5. Too Many Keyframes
More than 10-15 keyframes make code hard to read. Use a timeline for very complex sequences.
Practice Questions
Q1: What format does the keyframes parameter accept? A: An array of state objects or an object with arrays per property.
Q2: How do you set different durations per keyframe? A: Include a duration property inside each keyframe object.
Q3: Can you use ease per keyframe? A: Yes. Add ease inside each keyframe object.
Q4: How does GSAP divide time between keyframes? A: Without per-keyframe duration, total tween duration is divided equally among keyframes.
Q5: Can keyframes include callbacks? A: Yes. Add onStart, onUpdate, or onComplete inside individual keyframes.
Challenge: Create a figure-8 motion path using keyframes with 8 waypoints. Add a trail effect using a second element that follows with delay.
FAQ
Try It Yourself
Animate a box through multiple keyframe states.
<!DOCTYPE html>
<html>
<head>
<title>GSAP Keyframes Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12/gsap.min.js"></script>
<style>
.box { width: 60px; height: 60px; background: #4ecdc4; border-radius: 8px; position: absolute; }
.target { position: absolute; width: 10px; height: 10px; background: #ff6b35; border-radius: 50%; opacity: 0.5; }
</style>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Keyframe Animation</h2>
<button onclick="playKeyframes()">Play</button>
<button onclick="resetBox()">Reset</button>
<div style="position:relative;height:300px;border:1px solid #ddd;border-radius:8px;margin-top:10px;">
<div class="box" id="box" style="top:20px;left:20px;"></div>
</div>
<script>
var box = document.getElementById('box');
function playKeyframes() {
gsap.to(box, {
keyframes: [
{ x: 350, y: 0, duration: 0.8, ease: 'power2.out' },
{ x: 350, y: 200, duration: 0.6, ease: 'power2.in' },
{ x: 0, y: 200, duration: 0.8, ease: 'power2.out' },
{ x: 0, y: 0, duration: 0.6, ease: 'bounce.out' }
]
});
}
function resetBox() {
gsap.set(box, { x: 0, y: 0, clearProps: 'all' });
}
</script>
</body>
</html>
What's Next
Handle animation callbacks.
Callbacks — Animation callbacks and events. Timeline Controls — Timeline control methods.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro