Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
One thing we did early on in CodePen was to write some code that would stop animations after a certain amount of time when we’re displaying a preview of them in a grid (like the homepage). We let them run at first so you can get a taste of what’s going on in that Pen, and then stop them to save your CPU. One animation can be CPU intensive, let alone many all running at once!
Later, when we built out Embedded Pens, we made that same animation-stopping behavior the default for those, as we thought we’d extend the courtesy of lower CPU use to users of those sites as well. Turns out that causes more confusion than anything else, so the new default is to allow all animations to run forever in Embedded Pens.
Basically, too many folks were like “why is isn’t this Pen working?!” and that’s not good. This new default behavior is more “works as written” and we hope that’s better. If you’d still like to stop animations (e.g. you’re going to embed a ton of them on a single page) you can…
You can still stop animations if you choose
There are two ways to do it.
- Add this attribute and value to the embed element:
data-animations="stop-after-5"This is useful for one-off Pens that you want to stop (perhaps some particularly intensive animation).
- Create an Embed Theme in which the default for that theme is to stop animations after 5 seconds. This is useful for entire sites where you’re trying to be performance sensitive.
What animations are stopped?
setInterval() and stop that. We stop any
requestAnimationFrame stuff. We stop CSS transitions or
@keyframe animations. It’s not totally comprehensive (e.g. SVG
<animation> isn’t stopped at this second, until we figure out how to stop that).