Toggling Animations On and Off

Publikováno: 9.1.2019

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 animation
document.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.

Celý článek

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 animation
document.body.style.setProperty("--toggle", "0");
document.body.style.setProperty("--playState", "paused");

// play animation
document.body.style.setProperty("--toggle", "1");
document.body.style.setProperty("--playState", "running");

Then get into using the media query to test for reduced motion off the bat, and storing the preferred value in localStorage.

Direct Link to ArticlePermalink

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

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace