Skip to content

Stories default animations curves and duration.#21446

Merged
gmajoulet merged 2 commits intoampproject:masterfrom
gmajoulet:animation_presets_default_curves
Mar 18, 2019
Merged

Stories default animations curves and duration.#21446
gmajoulet merged 2 commits intoampproject:masterfrom
gmajoulet:animation_presets_default_curves

Conversation

@gmajoulet
Copy link
Copy Markdown
Contributor

Updating the default stories animations curves and duration so they respect the material guidelines.
Animations are actually still slower than what's recommended but I don't want to introduce too big of a change.

Publishers could already override the animation duration, but this PR also introduces a way to provide their own timing function:

<p animate-in="fly-in-right" animate-in-duration="600" animate-in-timing-function="linear">
  ...
</p>


/** @private @const */
this.easing_ = animationDef.easing || this.presetDef_.easing ||
'cubic-bezier(0.4, 0.0, 0.2, 1)';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nit: move the cubic-bezier(0.4, 0.0, 0.2, 1) to a constant (DEFAULT_EASING?)

duration: 500,
easing: 'ease-out',
duration: 400,
easing: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Should we also add these to pan-up/down/.. & zoom-in/out ? I heard there was a request to do this. Up to you!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Publishers will be able to override these curves once we enable the validation, I believe the default 1000ms linear animation is nice for most Ken Burns like effects :)
Do you have more context on this? I wouldn't want to break existing implementations by completely changing the curve.

@Enriqe
Copy link
Copy Markdown
Contributor

Enriqe commented Mar 18, 2019

Will the validation for the new attribute come in a new PR? Up to you

@gmajoulet gmajoulet force-pushed the animation_presets_default_curves branch from bfe3250 to a139d5b Compare March 18, 2019 15:15
@gmajoulet gmajoulet merged commit 6b10416 into ampproject:master Mar 18, 2019
noranazmy pushed a commit to noranazmy/amphtml that referenced this pull request Mar 22, 2019
* Default animation curves + duration.

* Extracting the default fallback easing into a constant.
bramanudom pushed a commit to bramanudom/amphtml that referenced this pull request Mar 22, 2019
* Default animation curves + duration.

* Extracting the default fallback easing into a constant.
swissspidy added a commit to ampproject/amp-wp that referenced this pull request Aug 27, 2019
swissspidy added a commit to ampproject/amp-wp that referenced this pull request Aug 28, 2019
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.

5 participants