✨ [amp-animation] Adds a new attr that allows to override pan scaling factor. #37965

jingfei · 2022-03-26T17:02:39Z

Currently amp-story animation preset scales the pan effect image by checking if the target is smaller than the story page; however, for the target that is not designed as full-bleed, it causes an unexpected scaling. For example, a small image in the story page with pan- animation might be scaled to 2x while the expectation is not to scale.

The PR provides a new attribution, pan-static-scale, that allows the pan animation to override the scaling factor with a static value, and it would fixes #37932.

/cc @newmuis

…tor.

amp-owners-bot · 2022-03-26T17:02:51Z

Hey @gmajoulet, @newmuis! These files were changed:

extensions/amp-story/1.0/animation-presets.js
extensions/amp-story/1.0/test/test-full-bleed-animations.js
extensions/amp-story/1.0/test/validator-amp-story-animations.html
extensions/amp-story/1.0/test/validator-amp-story-animations.out
extensions/amp-story/amp-story.md
extensions/amp-story/validator-amp-story.protoascii

Hey @ampproject/wg-caching! These files were changed:

extensions/amp-story/1.0/test/validator-amp-story-animations.html
extensions/amp-story/1.0/test/validator-amp-story-animations.out
extensions/amp-story/validator-amp-story.protoascii

gmajoulet

Thank you for opening a PR! Could you post an example where the image is scaled 2x? I'd like to understand how bad the issue can get.
The one thing I'm worried about is that most publishers have historically not been able to test their layouts/animations on enough devices to get them to be always displayed correctly. I'm afraid for us to open this setting and publishers getting it wrong for some devices.

extensions/amp-story/1.0/animation-presets.js

…scaling

jingfei · 2022-03-29T11:09:12Z

Sure no problem. As long as the image is not full-bleed it will be scaled to fit the story page if pan effect is added.

Here's a quick example, the 3 pages in the story are the same except for pan animation

page 1: no animation
page 2: pan-right effect --> it scales the image to be same as the page width/height, which is not expected in our use case
page 3: zoom-in effect --> as the scaling factor is provided by user, it works as expected in our use case.

With the new added attr, it's able to be animated with pan effect and custom scaling factor.

Let me know if you have questions, happy to discuss more in details. Thank you.

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="This is the AMP Boilerplate.">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0/amp-story-1.0.js">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
    <!-- Import other AMP Extensions here -->
    <style amp-custom>
    /* Add your styles here */
    </style>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <link rel="canonical" href=".">
    <title>My AMP Page</title>
  </head>
  <body>
    <amp-story standalone
               publisher="The Publisher"
               title="My Story"
               publisher-logo-src="logo.png"
               poster-portrait-src="poster-portrait.png"
               poster-square-src="poster-square.png"
               poster-landscape-src="poster-landscape.png">
      <amp-story-page id="page1">
        <amp-story-grid-layer template="vertical">
          <h1>Hello World</h1>
          <div style="width:420px;height:315px;overflow:hidden">
            <amp-img layout="responsive" height="960" width="1280" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1280px-Image_created_with_a_mobile_phone.png" />
          </div>
        </amp-story-grid-layer>
      </amp-story-page>
      <amp-story-page id="page2">
        <amp-story-grid-layer template="vertical">
          <h1>Hello Animation</h1>
          <div style="width:420px;height:315px;overflow:hidden">
            <amp-img animate-in="pan-right" layout="responsive" height="960" width="1280" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1280px-Image_created_with_a_mobile_phone.png" />
          </div>
        </amp-story-grid-layer>
      </amp-story-page>
      <amp-story-page id="page3">
        <amp-story-grid-layer template="vertical">
          <div style="width:420px;height:315px;overflow:hidden">
          <amp-img animate-in="zoom-in" layout="responsive" height="960" width="1280" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1280px-Image_created_with_a_mobile_phone.png" />
          </div>
        </amp-story-grid-layer>
      </amp-story-page>
      <amp-story-bookend src="bookend.json" layout=nodisplay></amp-story-bookend>
    </amp-story>
  </body>
</html>

gmajoulet · 2022-03-31T16:19:22Z

cc @mszylkowski can you make sure this is the right fix to this problem and review? Thank you!

gmajoulet · 2022-03-31T16:20:57Z

Also, please don't forget to udpate the validation rules so you can add the attribute without making your stories invalid:

amphtml/extensions/amp-story/validator-amp-story.protoascii

Lines 222 to 248 in bccc2a3

    
           attrs: { 
        
             name: "animate-in" 
        
             value: "drop" 
        
             value: "fade-in" 
        
             value: "fly-in-bottom" 
        
             value: "fly-in-left" 
        
             value: "fly-in-right" 
        
             value: "fly-in-top" 
        
             value: "pan-down" 
        
             value: "pan-left" 
        
             value: "pan-right" 
        
             value: "pan-up" 
        
             value: "pulse" 
        
             value: "rotate-in-left" 
        
             value: "rotate-in-right" 
        
             value: "scale-fade-down" 
        
             value: "scale-fade-up" 
        
             value: "twirl-in" 
        
             value: "whoosh-in-left" 
        
             value: "whoosh-in-right" 
        
             value: "zoom-in" 
        
             value: "zoom-out" 
        
           } 
        
           attrs: { name: "animate-in-after" } 
        
           attrs: { name: "animate-in-delay" } 
        
           attrs: { name: "animate-in-duration" } 
        
           attrs: { name: "animate-in-timing-function" }

jingfei · 2022-03-31T16:28:27Z

No problem! Validation rule added.
Thanks for the reminder.

…scaling

mszylkowski

I think Gabriel commented before, but it's super hard for creators to know how this attribute will behave for different page sizes (it's likely that 90% of that comes from how hard it is to understand the current logic).

There's an issue with this logic, which is that the images by default have pixel sizes (the value on width and height) and the scaling factor helps to correct that, although it's really bad at it (it's even harder with different layout types).

The correct way to fix this would be to check the size of the container instead of the page, so that smaller containers will not require such large zoom levels. The fast way to fix this is to multiply the scaling factor calculated by the attribute that you want to pass here, so that there's still smarter scaling, but you can specify the "ratio" that you want to use (eg: 0.5 for an element that occupies 50% of the page)

extensions/amp-story/1.0/animation-presets.js

extensions/amp-story/validator-amp-story.protoascii

…scaling

jingfei · 2022-04-03T16:34:04Z

As discussed with @mszylkowski offline, will keep the CL as-is to apply to our use case. At the same time, no further CSS change (e.g. to remove full-bleed CSS) will make to reduce the additional complication.

Also, in the latest changes, I updated the validation rules with tests.

PTAL. Thank you.

mszylkowski

In other areas of the codebase we use the term scaling-factor for these types of things, it would make more sense to call the attribute pan-scaling-factor for consistency. Otherwise looks good.

extensions/amp-story/1.0/test/test-full-bleed-animations.js

jingfei · 2022-04-04T16:19:46Z

Sure, updated the attr name to pan-scaling-factor.

…iables.

MichaelRybak

Approving validator changes.

Adds a new attr that allows amp-animation to override pan scaling fac…

88b3d98

…tor.

amp-owners-bot bot requested a review from Enriqe March 26, 2022 17:02

gmajoulet requested review from gmajoulet and removed request for Enriqe March 28, 2022 18:09

gmajoulet reviewed Mar 28, 2022

View reviewed changes

extensions/amp-story/1.0/animation-presets.js Outdated Show resolved Hide resolved

jingfei added 2 commits March 29, 2022 19:06

Update pan static scale attr variable name.

21d07a1

Merge branch 'main' into jingfeiyang-allow-to-override-animation-pan-…

c54c56d

…scaling

Update the animation scaling factor test to cover all pan animations.

f0cdc8f

jingfei force-pushed the jingfeiyang-allow-to-override-animation-pan-scaling branch from ad52c24 to f0cdc8f Compare March 29, 2022 12:11

gmajoulet requested a review from mszylkowski March 31, 2022 16:18

Add the new attr into validation rule.

d68456b

Merge branch 'main' into jingfeiyang-allow-to-override-animation-pan-…

454a01b

…scaling

mszylkowski reviewed Mar 31, 2022

View reviewed changes

extensions/amp-story/1.0/animation-presets.js Outdated Show resolved Hide resolved

mszylkowski mentioned this pull request Mar 31, 2022

✨ [Story animations] Fix panning presets and add scaling factor #37992

Closed

MichaelRybak reviewed Apr 1, 2022

View reviewed changes

extensions/amp-story/validator-amp-story.protoascii Outdated Show resolved Hide resolved

jingfei added 4 commits April 3, 2022 20:31

Update attr regex and the nullish operator syntax.

914c596

Add example in animateion-presets.html with pan-static-scale attr.

afcf239

Merge branch 'main' into jingfeiyang-allow-to-override-animation-pan-…

3948c6a

…scaling

Update the pan-static-scale validation rules and tests.

db7f661

Update pan-static-scale doc.

73288ca

mszylkowski reviewed Apr 4, 2022

View reviewed changes

extensions/amp-story/1.0/test/test-full-bleed-animations.js Outdated Show resolved Hide resolved

Update attr name to pan-scaling-factor, and minor updates on test var…

5db8c8e

…iables.

jingfei force-pushed the jingfeiyang-allow-to-override-animation-pan-scaling branch from dba9c89 to 5db8c8e Compare April 4, 2022 16:22

jingfei requested review from MichaelRybak and mszylkowski April 4, 2022 16:24

MichaelRybak approved these changes Apr 4, 2022

View reviewed changes

mszylkowski approved these changes Apr 4, 2022

View reviewed changes

mszylkowski merged commit 28e56e7 into ampproject:main Apr 5, 2022

gmajoulet added this to In progress in wg-stories Sprint via automation Apr 6, 2022

gmajoulet moved this from In progress to Done in wg-stories Sprint Apr 6, 2022

jshamble mentioned this pull request Apr 8, 2022

wg-stories Status Update 2022-04-08 ampproject/wg-stories#101

Open

ampprojectbot added PR use: In Beta / Experimental PR use: In Stable labels Apr 21, 2022

ampprojectbot added the PR use: In LTS label May 12, 2022

jshamble mentioned this pull request May 20, 2022

wg-stories Status Update 2022-05-20 ampproject/wg-stories#103

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ [amp-animation] Adds a new attr that allows to override pan scaling factor. #37965

✨ [amp-animation] Adds a new attr that allows to override pan scaling factor. #37965

jingfei commented Mar 26, 2022

amp-owners-bot bot commented Mar 26, 2022 •

edited by ampprojectbot

Loading

gmajoulet left a comment

jingfei commented Mar 29, 2022

gmajoulet commented Mar 31, 2022

gmajoulet commented Mar 31, 2022

jingfei commented Mar 31, 2022

mszylkowski left a comment •

edited

Loading

jingfei commented Apr 3, 2022

mszylkowski left a comment

jingfei commented Apr 4, 2022

MichaelRybak left a comment

✨ [amp-animation] Adds a new attr that allows to override pan scaling factor. #37965

✨ [amp-animation] Adds a new attr that allows to override pan scaling factor. #37965

Conversation

jingfei commented Mar 26, 2022

amp-owners-bot bot commented Mar 26, 2022 • edited by ampprojectbot Loading

gmajoulet left a comment

Choose a reason for hiding this comment

jingfei commented Mar 29, 2022

gmajoulet commented Mar 31, 2022

gmajoulet commented Mar 31, 2022

jingfei commented Mar 31, 2022

mszylkowski left a comment • edited Loading

Choose a reason for hiding this comment

jingfei commented Apr 3, 2022

mszylkowski left a comment

Choose a reason for hiding this comment

jingfei commented Apr 4, 2022

MichaelRybak left a comment

Choose a reason for hiding this comment

amp-owners-bot bot commented Mar 26, 2022 •

edited by ampprojectbot

Loading

mszylkowski left a comment •

edited

Loading