Hi @sebastianbenz ,

after a long try getting the preview rotate animation as intuitive and 'realistic' as on real-life devices, we decided sticking with this solution. (See screen capture below)

What I basically did is fading and rotating the <amp-iframe> (child) while morphing the <div> (parent) to it's new aspect ratio. Additionally I gave the parent background-color: black and set overflow: hidden to make it feel more like a real device.

IMPORTANT NOTE: To morph the size of the preview I had to transition padding and max-width of child and parent element. I know that these are not part of the white listed properties for keyframes, but in this case it is necessary to get the desired effect and since it causes no amp validation error, I think we can shut one eye on this... what do you think?

P.S. the other thing is also fixed now, so the preview should keep it's dimensions anytime on any resolution.

P.P.S. I also got a fallback solution, if you don't like the rotation. It's just morphing the size of the preview, without fading and rotating anything.

But I hope you like it 👍

Good idea with putting the tool icons in the middle. Few high-level comments:

• it'd be super cool if we could animate the preview rotation 🤪
• on mobile, the preview does not rotate, but expand to the bottom. We should keep the preview dimensions during rotation.

Impressive! Thanks for trying! However, we shouldn't use non-hardware accelerated properties for the animation (we have to be a good example :-) ). What does the fallback look like?

The fallback looks like this, but unfortunately it also uses non-hardware accelerated properties:

The padding-top of <amp-iframe> is changing from 56.25% to 177.78% (16:9 to 9:16) and the max-width of the parent <div> is changing from 56.25% to 100%.

Both elements have the transition property, which I'll remove now.

I'll try a new solution with just transform and opacity.

Okay, 2 new solutions:

1. I removed the transition properties and left the rotating animation as it was. This causes that the code block is jumping up and down, because of different dimension heights.

2. I gave the landscape frame a dynamic margin, so it takes the same height as in portrait mode. This fixes the jumping code block issue, but waste space in landscape mode.

Screen captures:

First: code block is jumping up and down

Second: code block stands still, but space is wasted

Awesome! I think the first one is perfect! The jumping code block is not a problem.

I'm glad you like it!

@sebastianbenz This PR is ready for official review now. Don't be suprised, I just renamed it.

Awesome! I think the first one is perfect! The jumping code block is not a problem.

@sebastianbenz, I wouldn't recommend that compromise. without the animation of the iframe container between the two states, the rotation of only the content makes the example feels broken and not meaningful anymore. Although we put some effort to it, wouldn't it be better for the user if we do not have an animation at all?

Hey @sebastianbenz
like we discusses I tried to give it a last shot based on your suggestion and here are my results:

I could achieve a morphing effect for the iframe container by adding a background div and change its transform: scale() values to fit in the correct dimensions.

This method brings two major issues with it: Sometimes the iframe is flickering and if you do a stress-test by rapidly clicking the button, it doesn't behave like expected. It looks broken, see screen captures below

1. On white background color (your suggestion)
   

2. On black background color (as before)
   

So @LongoOfficial and I wouldn't recommend this solution and we should rather stick without an animation then.

What do you think?

I agree, this doesn't work too well. One thing I'd be curious about: what if we remove the morph animation from iframe and speedup the rotation?

I decreased the rotation angle from 75deg to 45deg and the animation duration from 650ms to 350ms so it's quite faster and snappier now, compared to the old version without morphing.

I like it better now, what do you say?

New version: 350ms, 45deg

Old version: 650ms, 75deg

I think 350ms, 45deg works best so far, maybe even only 250ms. Did you try the version without morph and animated placeholder?

As discussed I removed the rotation and speed up the morphing background container to 250ms.

Here is the result:

A Googler has manually verified that the CLAs look good.

(Googler, please make sure the reason for overriding the CLA status is clearly documented in these comments.)

ℹ️ Googlers: Go here for more info.

Are we good to merge or is anything missing?

From my side we are ready. The only things that are missing are planned for the next steps, eg. the 'side-frame' preview, update for the sampler, etc.