diff --git a/docs/animations.md b/docs/animations.md index de0e890..0af4173 100644 --- a/docs/animations.md +++ b/docs/animations.md @@ -107,6 +107,12 @@ document.querySelector('.animation-wrapper').classList.add('is-animating'); $('.animation-wrapper').addClass('is-animating'); ``` +### Paused behavior + +From Motion UI v1.3.0, the animation is reset when `.is-animating` is removed from an animated or animating element. This is the only way we found to make animation work on macOS Safari. + +To rollback to the previous behavior and make the animation pause when `.is-animating` is removed, add `.mui-pause` to the parent container. This can be set on `body` to affect all animations. + ## 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/configuration.md b/docs/configuration.md index a04409e..f2a260d 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: 'mui-pause', activate-queue-class: 'is-animating' ); ``` diff --git a/docs/src/animations.md b/docs/src/animations.md index da0acd8..c4d2430 100644 --- a/docs/src/animations.md +++ b/docs/src/animations.md @@ -114,6 +114,12 @@ document.querySelector('.animation-wrapper').classList.add('is-animating'); $('.animation-wrapper').addClass('is-animating'); ``` +### Paused behavior + +From Motion UI v1.3.0, the animation is reset when `.is-animating` is removed from an animated or animating element. This is the only way we found to make animation work on macOS Safari. + +To rollback to the previous behavior and make the animation pause when `.is-animating` is removed, add `.mui-pause` to the parent container. This can be set on `body` to affect all animations. + ## 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/configuration.md b/docs/src/configuration.md index 6f2014d..2d73745 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: 'mui-pause', activate-queue-class: 'is-animating' ); ``` diff --git a/src/_settings.scss b/src/_settings.scss index e1fe7fe..d859d07 100644 --- a/src/_settings.scss +++ b/src/_settings.scss @@ -57,6 +57,6 @@ $motion-ui-settings: ( hinge-and-fade: true, scale-and-fade: true, spin-and-fade: true, - pause-queue-class: 'pause', + pause-queue-class: 'mui-pause', activate-queue-class: 'is-animating', ) !default;