docs: add docs to play, pause and reset mui-series

foundation · May 6, 2018 · 4e6b789 · 4e6b789
1 parent e274752
commit 4e6b789
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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;
   }