diff --git a/docs/animations.md b/docs/animations.md index de0e890..0093b53 100644 --- a/docs/animations.md +++ b/docs/animations.md @@ -97,7 +97,7 @@ To add a delay to the start of the queue, add the length in seconds to the `mui- } ``` -To trigger the queue, add the class `.is-animating` to the parent container. This can be done easily in JavaScript: +**To play the queue**, add the class `.is-animating` to the parent container. This can be done easily in JavaScript: ```js // Plain JavaScript (IE10+) @@ -107,6 +107,10 @@ document.querySelector('.animation-wrapper').classList.add('is-animating'); $('.animation-wrapper').addClass('is-animating'); ``` +**To pause the queue**, add `.is-paused` to the parent container (without removing `.is-animating`). For macOS Safari to correctly play pause the animation, `.is-paused` must not be set by default but only after `.is-animating`. See https://git.io/motion-ui-97. + +**To reset the queue** to its initial state, remove `.is-animating` and `.is-paused` from the parent container. The queue can then be started again. + ## Use with WOW.js Motion UI can be paired with WOW.js to animate elements in as the page scrolls. [Learn more about WOW.js integration.](wow.md); diff --git a/docs/src/animations.md b/docs/src/animations.md index da0acd8..0938783 100644 --- a/docs/src/animations.md +++ b/docs/src/animations.md @@ -104,7 +104,7 @@ To add a delay to the start of the queue, add the length in seconds to the `mui- } ``` -To trigger the queue, add the class `.is-animating` to the parent container. This can be done easily in JavaScript: +**To play the queue**, add the class `.is-animating` to the parent container. This can be done easily in JavaScript: ```js // Plain JavaScript (IE10+) @@ -114,6 +114,10 @@ document.querySelector('.animation-wrapper').classList.add('is-animating'); $('.animation-wrapper').addClass('is-animating'); ``` +**To pause the queue**, add `.is-paused` to the parent container (without removing `.is-animating`). For macOS Safari to correctly play pause the animation, `.is-paused` must not be set by default but only after `.is-animating`. See https://git.io/motion-ui-97. + +**To reset the queue** to its initial state, remove `.is-animating` and `.is-paused` from the parent container. The queue can then be started again. + ## Use with WOW.js Motion UI can be paired with WOW.js to animate elements in as the page scrolls. [Learn more about WOW.js integration.](wow.md); diff --git a/src/util/_series.scss b/src/util/_series.scss index d459eb4..d16dc76 100644 --- a/src/util/_series.scss +++ b/src/util/_series.scss @@ -47,8 +47,10 @@ $-mui-queue: (); animation-duration: $duration; } - // Pause the animation - // This was the behavior before v1.3.0. See https://git.io/motion-ui-97 + // Pause the animation. + // For macOS Safari to play it correctly, `animation-play-state` + // must not be `paused` before the animation start. + // See https://git.io/motion-ui-97 .#{map-get($motion-ui-settings, pause-queue-class)} & { animation-play-state: paused; }