Well aren't keyframe offsets just super handy!

See those useful offset values?

Keyframe percentages are super important in crafting animations; for both complex animations or just well orchestrated timings.

You've probably seen the % values in the keyframes.

They're pretty much 2nd nature.

But I bet you've never thought to yourself, "Let me specify this keyframe offset value to 15%" 🤓 At least I hadn't, but I like the more formal name!

So… what about in JS?

In the animate function, the keyframes are passed as an array of objects, where each object is a keyframe.

The logical place to put an offset value is right there!

and there you have it, the tip in this article, how to set offsets in your JS keyframe animations. At least… that's why I wrote this. Was new to me!

Try it out in this Codepen if you want to 🙂