Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 Animation improvements #23322

Merged
merged 4 commits into from
Jul 15, 2019
Merged

🐛 Animation improvements #23322

merged 4 commits into from
Jul 15, 2019

Conversation

Enriqe
Copy link
Contributor

@Enriqe Enriqe commented Jul 15, 2019

This PR introduces a number of fixes for animation bugs that we've had for a while related to hold-to-pause.

1: Console errors were showing up due to animations that hadn't started yet. This was due to the fact that we weren't checking if the animation was still waiting for another animation or had a delay.

2: When an animation with a delay was paused, it ignored the pausing and continued to animate. Fixes #23224

3: When an animation with a delay hadn't started yet, and the user navigated to another page and then came back, the delay wasn't being restarted, so it would appear right away on page landing.

To address these, I separated the getStartWaitPromise_ and a new getDelayWaitPromise_ that is only in charge of the delay. Each delay will get a delayId_ and a delayStartTime_. With these, we are able to cancel and restart the delay for the corresponding animation.

EDIT: the above paragraph's approach wasn't necessary. We only needed to include the delay in the animation keyframe definition (see latest commit).

ezgif-1-f74baaa078c3

@Enriqe Enriqe requested review from gmajoulet and newmuis July 15, 2019 15:28
@Enriqe Enriqe self-assigned this Jul 15, 2019
@gmajoulet
Copy link
Contributor

So sorry about this, didn't think of it before I saw the AnimationTypedef reviewing this PR, but could you try simply passing the delay to the animation runner?
It'd start the animation right away, so that'd fix our console errors. Also, I imagine calling pause should pause the delay too, but that needs testing.

gmajoulet@7ea745f

I think it'd need more work than this commit, but could you look into how this simplifies your PR?

Copy link
Contributor

@gmajoulet gmajoulet left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome, one nit :))

@@ -283,13 +269,25 @@ class AnimationRunner {

/** Pauses the animation. */
pause() {
// Animation hasn't started yet since it's waiting for a sequenced
// animation.
if (this.scheduledActivity_ !== null) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given your comment, wouldn't this.scheduledWait_ be more accurate?

@Enriqe Enriqe merged commit dda882f into ampproject:master Jul 15, 2019
rindo pushed a commit to logly/amphtml that referenced this pull request Jul 24, 2019
* animation improvements

* fix types

* welp...

* use scheduleWait_ var instead
thekorn pushed a commit to edelight/amphtml that referenced this pull request Sep 11, 2019
* animation improvements

* fix types

* welp...

* use scheduleWait_ var instead
@Enriqe Enriqe deleted the animation branch February 4, 2020 19:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Story hold to pause sometimes doesn't resume the animations.
3 participants