Set before/after animation sequence

[ThierryA]

AC: For each block, user can set if the animation of the block is happening Immediately or After another block's animation has been finished.

• Add field for determining whether an element should be animated after another element finishes animating.

[swissspidy]

Based on our discussions, in a first round this should be a simple dropdown where one could say "Start after XY finishes"

In order to do this, we need a list of all elements on the current story page with an animation.

Some select( 'core/editor' ) functions that might be helpful: getBlocks, getSelectedBlockClientId, getBlockHierarchyRootClientId, getBlockOrder , and getBlock.

However, we probably need to create our own separate store for all animated elements. This would be easier to implement and future-proof (think full-fledge animation control in a timeline).

Speaking of that, I wonder what we could actually show in that dropdown. For each block, we have its type and its attributes/content, so maybe the dropdown could look like this:

Start animation after the following element:

* Immediately
* "Lorem ipsum dolor" (Text block)
* "Blue Montains" (Image)
* "Buy now" (CTA)

This will depend a bit on our reworking of layers, so maybe we need to hold off on this one for a bit at first.

@westonruter Thoughts?

[westonruter]

Coming up with names for the elements in the drop-down could be a challenge. If you have two images in a page, how would we differentiate one from the other in the list? Rely on attachment title? What about external embeds like YouTube? The Block Navigation component does not provide helpful contextual snippets. Seems like something that should be part of core, no?

[swissspidy]

Yep, it's definitely something we need to figure out along the way.

There's an issue for the Block Navigation component about this, but without much traction: WordPress/gutenberg#11010. The following project is mentioned there as well, which shows excerpts of headings: https://github.com/sortabrilliant/guidepost

Compared to regular posts, AMP stories allow only a limited set of blocks, which might make it a bit easier for us to implement here. After that, we can refine things and then try to propose something for inclusion in Gutenberg.

[swissspidy]

As suggested by @ThierryA, I had a look at how Apple's Keynote does handle animations.

At first, the UI only exposes a simple numbered dropdown, as you can see in the sidebar on this screen here:

It works very simple: If you select 1 for an element, the current number 1 will be placed second.

For more complex arrangements, one can click on Build Order to see something more like we have discussed previously:

The label on the left is either an excerpt, the image name, or the type of shape. The label on the right is the animation type.

At the bottom of the modal window you can change the delay for each animation and whether it should start after or together with a previous animation.

In our use case, we only have 1 animation per element, which makes things a bit easier.

[ThierryA]

@swissspidy I would also advise to take a look at Google Slides way of handling animation. It is pretty close to keynote but you might get some useful inspiration from that tool too.

[swissspidy]

Google Slides:

[westonruter]

So Google Slides tries to show a little thumbnail of the element being animated and Keynote provides a text description.