Skip to content

Adds new amp-story zoom/pan animations ✨ #13910

Merged
newmuis merged 3 commits intoampproject:masterfrom
Enriqe:ken-burns-impl
Mar 19, 2018
Merged

Adds new amp-story zoom/pan animations ✨ #13910
newmuis merged 3 commits intoampproject:masterfrom
Enriqe:ken-burns-impl

Conversation

@Enriqe
Copy link
Copy Markdown
Contributor

@Enriqe Enriqe commented Mar 9, 2018

Solves #12173

Adds new amp-story zoom/pan animations that allows users to achieve a "Ken Burns" effect with images. Includes examples testing usage.

We might want to add an amp-by-example description so that users trying to achieve the effect can find the instructions on how to do it somewhere.

}
},
'zoom-in': {
duration: 30000,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

nit: 30s makes sense for a Ken Burns effect, but for an individual preset I think zoom-in should be set to something between 500-1000 ms.

easing: 'linear',
keyframes: [
{transform: 'scale(1,1)'},
{transform: 'scale(3,3)'}
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.

As seen offline, we might want to experiment a bit with that and see if we're happy with the image quality :)

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.

Yep, will speak with Hong from UX today to see what she thinks 👍

@Enriqe
Copy link
Copy Markdown
Contributor Author

Enriqe commented Mar 19, 2018

After discussion with UX we decided to keep the default values for the animation as is, to allow more flexibility.

We will eventually write doc / example on how to achieve this effect with optimal results. The documentation will describe the practices to achieve the best results, including:

  • Image sizing

  • Animation duration

  • Order of animation (panning in img and zooming in img-container vs. doing it a different way).

@newmuis newmuis merged commit 5d361b8 into ampproject:master Mar 19, 2018
@Enriqe Enriqe deleted the ken-burns-impl branch March 20, 2018 20:07
Enriqe added a commit to Enriqe/amphtml that referenced this pull request Mar 20, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants