feat: added prefered reduced motion (prm) condition which triggers to directly disable the animations if the prm equals to reduce #30
This commit is contained in:
parent
06a73e6b10
commit
632986b36b
1 changed files with 7 additions and 4 deletions
|
@ -1,5 +1,6 @@
|
||||||
// State of the animation
|
// Checks if the user enabled or not prefers-reduced-motion
|
||||||
let animationPaused = false;
|
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||||
|
|
||||||
// Dictionary to keep track of animation intervals
|
// Dictionary to keep track of animation intervals
|
||||||
let animationIntervals = {};
|
let animationIntervals = {};
|
||||||
// Dictionary to keep track of delay count for each animation
|
// Dictionary to keep track of delay count for each animation
|
||||||
|
@ -29,8 +30,10 @@ function animate(id, delay) {
|
||||||
frames[id] = framesList;
|
frames[id] = framesList;
|
||||||
delays[id] = delay;
|
delays[id] = delay;
|
||||||
|
|
||||||
// start the animation
|
// Start the animation if prefers-reduced-motion is not enabled
|
||||||
|
if (!prefersReducedMotion) {
|
||||||
animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
|
animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateAnimation(id, framesList, totalFrames) {
|
function updateAnimation(id, framesList, totalFrames) {
|
||||||
|
|
Loading…
Reference in a new issue