Make it easy to create Ken Burns effect

swissspidy commented 5 years ago

Feature description

As a user I want to be able to utilize the Ken Burns effect when adding animations to my story.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Details from Pascal:

Quote from the docs:

Best known for his work on documentaries, Ken Burns developed a signature effect which consisted of a combination of panning and zooming over an image. It has since been used popularly.

In AMP Stories this can be achieved by nesting elements with different animations. Basically like this:

<amp-story-page id="ken-burns-effect1">
  <amp-story-grid-layer template="fill">
    <div animate-in="zoom-in"
      animate-in-duration="30s"
      class="img-container">
      <amp-img id="ken-burns-img1"
        src="https://picsum.photos/1600/1200?image=1077"
        animate-in="pan-left"
        animate-in-duration="30s"
        layout="fixed"
        width="1600"
        height="1200">
      </amp-img>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

View examples and demo

While in theory one could use this effect with multiple images, I think we should make this rather straightforward. Suggestion:

When adding an image as the background image for a page, add a checkbox "Add Ken Burns effect" that would do all the element nesting and stuff.

Alternatives would be having the user create a section/group block with some animation, then an image within that, etc.

Related to #3421 and #2533

Implementation brief

Add a new property on story pages only relevant for pages with background media set to an image, called "zoomInDuration". If this attribute is set, a ken burns effect will be displayed. If not, no animation will be used.
Add a new checkbox control in the inspector panel for background media for a story page above the control for "Assistive text" named "Use Pan Image effect". If checked, display two extra controls, one is a range for duration defaulting to 6 seconds, the other is a "Play animation" button previewing the animation. Also, zoom the image in around the chosen focal point to double the minimum image size required for covering the page with the focal point centered on the page as well as possible (image should still cover entire page).
Generate an animation in both editor and rendered amp story as follows: - Animate pan-left/-right, pan/up/-down and zoom simultanously. - Start zoom is 75% of final zoom and end zoom is the zoom required above. - If the focal point is to the left of the image, the horizontal pan will be a pan-left starting at the right-most edge of the image matching the right-most edge of the page and the end matching the above centering of the focal point. Otherwise flip right and left in the above. - If the focal point is in the top of the image, the vertical pan will be a pan-up starting at the bottom-most edge of the image matching the bottom-most edge of the page and the end matching the above centering of the focal point. Otherwise flip up and down in the above.

QA testing instructions

Demo

Changelog entry

westonruter commented 5 years ago

This will be interesting when combined with the focal point picker. If the focal point is more than 50% from the left, should it default to pan-left instead of pan-right?

cathibosco commented 5 years ago

This is high in demand from end users...

swissspidy commented 5 years ago

@cathibosco Do you have any sources to back this statement? Curious to hear exact demands :)

swissspidy commented 5 years ago

Here's how MakeStories did it in their editor:

https://twitter.com/teammakestories/status/1148231394474070022

cathibosco commented 5 years ago

@swissspidy I have not collected any "exact demands" 😎but from our small team of collaborators' perspective this feature increases the immersive experience for audiences dramatically. Ken himself uses the technique it to make static images work cinematically for story telling. It makes the AMP Story more immersive than a slideshow for example.

We think of static images using this technique as a macro video (almost). Little technical skills needed to produce Pan & Zoom Techniques for editors, smaller files than videos require, - with a lot of immersive story telling bang when done well. 💥

swissspidy commented 5 years ago

a lot of immersive story telling bang

Sounds like a great changelog entry 😄👍

swissspidy commented 5 years ago

AMP story with custom CSS-based Ken Burns effect: https://codepen.io/pbakaus/pen/dEERej

AMP story with custom CSS transitions: https://codepen.io/pbakaus/pen/BeeRNm

Props @pbakaus

barklund commented 5 years ago

Suggested UI for Ken Burns corresponding to the Implementation Brief above:

Without effect	With effect

@cathibosco, feel free to comment. Ignore minor inconsistencies in padding, etc.

swissspidy commented 5 years ago

Worth noting that, when there are animated blocks on a page, there is already a animation section:

spacedmonkey commented 5 years ago

How will this animation work with existing animations? If a user clicks on play on the global animations will this the burns effect also play?

There is also a animate-in-delay property in the docs, is this something we which to support as well?

I know this may seem like an odd idea, but have you thought about using the image block? Is there was an option added to the image, like 'Fit to size of page'. This would cover the size of the page. Then existing animation options could be reused and the animation would play as other animations do. I am not saying this should be the course of action we take, but asking if course of action was considered.

barklund commented 5 years ago

How will this animation work with existing animations? If a user clicks on play on the global animations will this the burns effect also play?

Yes, that's a good question. @swissspidy mentioned the same thing above. I don't have an answer for this.

There is also a animate-in-delay property in the docs, is this something we which to support as well?

As far as I know, we want to keep it simple, so no delay. But it would be simple to add.

I know this may seem like an odd idea, but have you thought about using the image block? Is there was an option added to the image, like 'Fit to size of page'. This would cover the size of the page. Then existing animation options could be reused and the animation would play as other animations do. I am not saying this should be the course of action we take, but asking if course of action was considered.

That's definitely also a nice way of doing it. I could be an animation type only selectable for image blocks and when selected it forces the image to cover the entire page it wouldn't be a movable block anymore. But that's then going to affect draggable and resizable requiring those to have exceptions for this special animation type. Exceptions are already a curse.

Come to think of it, both of the above concerns can be fixed by creating a new block type, which is an immovable, fixed-size full page block, which require an image to be selected and only has one possible animation on it, which is this Ken Burns effect. Then it's a block just like any other and can be layered (but not having it at the bottom is silly), and the animation can be queued like any other. The playback for the page then doesn't have to be changed to accommodate this one.

For ease of use, there can be a button next to the page background image, that says something like "Convert to Background Media Block to enable animations" or similar.

In the future this Background Media block could then also be used to support 3D images, 360 images/videos, etc (once supported by AMP of course).

spacedmonkey commented 5 years ago

Adding a background block is something I suggested here. It has some key benefits, listed in the issue comment.

I don't see why other animations could not be applied to the background block. Like fade in / out would work well for a background.

barklund commented 5 years ago

Adding a background block is something I suggested here. It has some key benefits, listed in the issue comment.

Very interesting discussion. The animation playback logic is a new pro for the Background block, that weighs pretty heavily in this context IMO.

But yes, there are some cons including migration. And it's a bigger development task.

I don't see why other animations could not be applied to the background block. Like fade in / out would work well for a background.

Very true, it could make sense. Even chaining them (in #3421) to first fade in, then Ken Burns could be an option.

We could create a limited list of possible animations and add the Ken Burns one only for the background block.

spacedmonkey commented 5 years ago

I think that the background block would make this task a lot either. The time saved could be used on the migration.

There are a lot of questions with background block.

Could you have multiple background blocks on one page? So you could fade into one for example.
Would the background block be listed with all other elements in the sidebar?
How would select a background block in the editor?

This is a product discussion. Maybe @MackenzieHartung has some thoughts on this one?

barklund commented 5 years ago

@MackenzieHartung, what's your thought here?

Options

We need to create animations for background images. We already have a notion of animations for on-page elements, but not for the page element itself. This creates complexity, when the list of animations on a page have to be calculated (which is needed for the "play all animations" on the page as well as for the "play after" for each single animation).

Furthermore, not having the background as a separate element also means that it doesn't show up in the element navigator.

Creating a separate Background Element was discussed previously, but rejected then (with a "for now" addendum).

These new complexities however warrant giving this a second look.

Moving to a background block is not easy as it creates a new for migration from the old structure to the new one, but I personally believe it's the best way moving forward - among other things considering future needs for background elements such as 360 images, 3D images, etc.

We could also move the Pan Image animations to the background block only, as it's weird to put on non-full-page images (as they're resized to cover the whole page anyway).

Summary

Option	Only Page Element	New Background Element
Implementation time	3 days	7 days
Code base impact	Medium	Severe
Development complexity	High	Medium
User experience impact	Bad	Good
Technical debt	More	Less

pbakaus commented 5 years ago

@samitron7

spacedmonkey commented 5 years ago

Great summary @barklund .

Making a background block is something I had already suggested before. So it is not a new idea. It has pros and cons as mentioned here.

Worth noting the creating a background block itself it the easier part. That could be completed in half a day. Here is where I see the complexities from from.

Validation inserting background block. Only allow one background block on the page at the time. On inserting two backgrounds or duplicating.
Make sure that background block is always the first layer, so that other element are on top of it.
Migration of background setting from page block. Detect that background settings are set and auto-magically break a background block with that page and copy the data across.

UX question, should a new page automatically have a background block, like this mocked by @swissspidy .

ampproject / amp-wp