Toggling Animations On and Off

A nicely detailed tutorial by Kirupa that gets into how you might provide a UI with persisted options that control whether animations run or not.

The trick is custom properties that control the movement:

body {  --toggle: 0;  --playState: "paused";}

Which are used within animations and transitions:

.animation {  animation: bobble 2s infinite;  animation-play-state: var(--playState);}.transition {  transition: transform calc(var(--toggle) * .15s) ease-in-out;}

And toggle-able by JavaScript:

// stop animationdocument.body.style.setProperty("--toggle", "0");document.body.style.setProperty("--playState", "paused");// play animation

… Read article

The post Toggling Animations On and Off appeared first on CSS-Tricks.