From 13bb2deef49d0476934bfadd4ef1bf7c0656fb2d Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sun, 6 May 2018 22:31:38 +0200 Subject: [PATCH 1/4] feat: change mui-series behavior for better Safari support #97 Do not set the animation name until it need to be played. This is the only way to control the animation start on all browsers (including latest Safari versions). See issue for more informations. **BREAKING CHANGE** When `.is-animating` is removed from `.mui-series`, the animation is now reset instead of paused. Setting `.is-animating` back will start the animation from its begining. Closes #97 --- src/util/_series.scss | 27 +++++++++++---------------- 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/src/util/_series.scss b/src/util/_series.scss index 8baeee3..21b3cac 100644 --- a/src/util/_series.scss +++ b/src/util/_series.scss @@ -1,16 +1,5 @@ $-mui-queue: (); -/// Pauses the animation on an element by default, and then plays it when an active class is added to a parent. Also sets the fill mode of the animation to `both`. This pauses the element at the first frame of the animation, and holds it in place at the end. -/// @access private -%animated-element { - animation-play-state: paused; - animation-fill-mode: both; - - .#{map-get($motion-ui-settings, activate-queue-class)} & { - animation-play-state: running; - } -} - /// Creates a new animation queue. /// @param {Duration} $delay [0s] - Delay in seconds or milliseconds to place at the front of the animation queue. @mixin mui-series($delay: 0s) { @@ -46,9 +35,15 @@ $-mui-queue: (); $item: ($duration, $gap); $-mui-queue: append($-mui-queue, $item) !global; - // CSS output - @extend %animated-element; - @include mui-animation($kf); - animation-duration: $duration; - animation-delay: $actual-delay; + // --- CSS output --- + // Initial properties + @include -mui-keyframe-get($kf, 0); + animation-fill-mode: both; + + // Start the animation + .#{map-get($motion-ui-settings, activate-queue-class)} & { + @include mui-animation($kf); + animation-delay: $actual-delay; + animation-duration: $duration; + } } From e2747521bc66e12e4de19f622d55ae784cd054bf Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sun, 6 May 2018 22:34:22 +0200 Subject: [PATCH 2/4] feat: add ".is-paused" mui-series modifier to pause the queue As `.is-paused` is not set at the animation definition, Safari handle it correctly and can play and pause the animation. See https://github.com/zurb/motion-ui/issues/97#issuecomment-386896941 --- docs/configuration.md | 1 + docs/src/configuration.md | 1 + src/_settings.scss | 1 + src/util/_series.scss | 6 ++++++ 4 files changed, 9 insertions(+) diff --git a/docs/configuration.md b/docs/configuration.md index a04409e..695e3a4 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -55,6 +55,7 @@ $motion-ui-settings: ( hinge-and-fade: true, scale-and-fade: true, spin-and-fade: true, + pause-queue-class: 'is-paused', activate-queue-class: 'is-animating' ); ``` diff --git a/docs/src/configuration.md b/docs/src/configuration.md index 6f2014d..ae9a3f2 100644 --- a/docs/src/configuration.md +++ b/docs/src/configuration.md @@ -58,6 +58,7 @@ $motion-ui-settings: ( hinge-and-fade: true, scale-and-fade: true, spin-and-fade: true, + pause-queue-class: 'is-paused', activate-queue-class: 'is-animating' ); ``` diff --git a/src/_settings.scss b/src/_settings.scss index a5cc9bf..d9c4eba 100644 --- a/src/_settings.scss +++ b/src/_settings.scss @@ -57,5 +57,6 @@ $motion-ui-settings: ( hinge-and-fade: true, scale-and-fade: true, spin-and-fade: true, + pause-queue-class: 'is-paused', activate-queue-class: 'is-animating', ) !default; diff --git a/src/util/_series.scss b/src/util/_series.scss index 21b3cac..d459eb4 100644 --- a/src/util/_series.scss +++ b/src/util/_series.scss @@ -46,4 +46,10 @@ $-mui-queue: (); animation-delay: $actual-delay; animation-duration: $duration; } + + // Pause the animation + // This was the behavior before v1.3.0. See https://git.io/motion-ui-97 + .#{map-get($motion-ui-settings, pause-queue-class)} & { + animation-play-state: paused; + } } From 4e6b7891c6a4faefdfb8fdac3da9c3f4b91375a3 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Sun, 6 May 2018 22:44:04 +0200 Subject: [PATCH 3/4] docs: add docs to play, pause and reset mui-series --- docs/animations.md | 6 +++++- docs/src/animations.md | 6 +++++- src/util/_series.scss | 6 ++++-- 3 files changed, 14 insertions(+), 4 deletions(-) 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; } From 36c77bbb0730bcc8dc3bf5267342bd333f71f46d Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Tue, 8 May 2018 22:33:16 +0200 Subject: [PATCH 4/4] docs: use dedicated classes for queue in mui-series examples --- docs/src/animations.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/src/animations.md b/docs/src/animations.md index 0938783..1c67afa 100644 --- a/docs/src/animations.md +++ b/docs/src/animations.md @@ -85,11 +85,11 @@ Begin your series with the `mui-series()` mixin. Inside this mixin, attach anima ```scss @include mui-series { // 2 second shake - .shake { @include mui-queue(2s, 0s, shake); } + .my-queue-shake { @include mui-queue(2s, 0s, shake); } // 1 second spin with a 2 second pause - .spin { @include mui-queue(1s, 2s, spin); } + .my-queue-spin { @include mui-queue(1s, 2s, spin); } // 1 second zoom and fade - .fade-zoom { @include mui-queue(1s, 0s, fade, zoom); } + .my-queue-fade-zoom { @include mui-queue(1s, 0s, fade, zoom); } } ``` @@ -98,9 +98,9 @@ To add a delay to the start of the queue, add the length in seconds to the `mui- ```scss // 2 second delay before the first shake @include mui-series(2s) { - .shake { @include mui-queue(2s, 0s, shake()); } - .spin { @include mui-queue(1s, 2s, spin()); } - .wiggle { @include mui-queue(wiggle); } + .my-queue-shake { @include mui-queue(2s, 0s, shake()); } + .my-queue-spin { @include mui-queue(1s, 2s, spin()); } + .my-queue-wiggle { @include mui-queue(wiggle); } } ```