From 07bd7d3dc6b83765ddf7bcc23e7da0a08f83ab0a Mon Sep 17 00:00:00 2001 From: Johannes Odland Date: Sat, 25 Nov 2023 11:43:59 +0100 Subject: [PATCH 1/2] Prevent effect from being applied when timeline is inactive, without cancelling animation --- src/proxy-animation.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/proxy-animation.js b/src/proxy-animation.js index bd279a2a..9f4a6250 100644 --- a/src/proxy-animation.js +++ b/src/proxy-animation.js @@ -574,10 +574,16 @@ function tickAnimation(timelineTime) { const details = proxyAnimations.get(this); if (timelineTime == null) { // While the timeline is inactive, it's effect should not be applied. - // To polyfill this behavior, we cancel the underlying animation. - if (details.animation.playState != 'idle') - details.animation.cancel(); + // To polyfill this behavior, we remove the underlying effect from animation and store it + if (details.animation.effect) { + details.tempEffect = details.animation.effect + details.animation.effect = null + } return; + } else if (details.animation.effect === null && details.tempEffect) { + // Restore effect if it previously was removed due to an inactive timeline + details.animation.effect = details.tempEffect + details.tempEffect = null } if (details.pendingTask) { From e198f7ca20b03fe2ab0a53e8b1350b9006025b4e Mon Sep 17 00:00:00 2001 From: Johannes Odland Date: Sat, 25 Nov 2023 11:44:17 +0100 Subject: [PATCH 2/2] Prevent effect from being applied when timeline is inactive, without cancelling animation --- src/proxy-animation.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/proxy-animation.js b/src/proxy-animation.js index 9f4a6250..0ae2243c 100644 --- a/src/proxy-animation.js +++ b/src/proxy-animation.js @@ -576,14 +576,14 @@ function tickAnimation(timelineTime) { // While the timeline is inactive, it's effect should not be applied. // To polyfill this behavior, we remove the underlying effect from animation and store it if (details.animation.effect) { - details.tempEffect = details.animation.effect - details.animation.effect = null + details.tempEffect = details.animation.effect; + details.animation.effect = null; } return; } else if (details.animation.effect === null && details.tempEffect) { // Restore effect if it previously was removed due to an inactive timeline - details.animation.effect = details.tempEffect - details.tempEffect = null + details.animation.effect = details.tempEffect; + details.tempEffect = null; } if (details.pendingTask) {