2

html workers.

I am struggling with amp-html animation.

I want to animate an amp-img as it enter the viewport. So far so good. We have done that. However: despite being referenced in the docs as working: This won't work. Pug code:

<amp-animation id="fadeIn1" layout="nodisplay">
  script(type="application/json").
    [
      {
        "selector": ".fadein2",
        "duration": "3200ms",
        "delay": "111ms",
        "easing": "ease-out",
        "iterations": "1",
        "fill": "both",
        "keyframes": [
          {"transform": "translate3d(0px, 110px,0)","clip-path":"circle(100px)"},
          {"transform": "translate3d(0px, 0px,0) ","clip-path":"circle(200px)"}
        ]
      }
    ]
</amp-animation>
<amp-position-observer on="enter:fadeIn1.start" layout="nodisplay">
</amp-position-observer>

The image (in Pug)

amp-img.cover.fadein2.p0.m0.z4(src=require(`Images/${img4}`), alt=alt1, width="51", height="51", layout="responsive")|

The amp-img itself shows up quite fine and in transforming. Just the cropping animation won't work. Did anyone of you succeed in doing that ?

Any hint about my stupidity would be helpful. Any hint about a solution would be even better.

Cheers, m

mainframeai
  • 41
  • 2
  • Hi, I still can't figure out if your animation works or not? What kind of "cropping animation" are we talking about? – Alexandr Kazakov Feb 07 '21 at 14:34
  • It's actually quite straithforward. The Image has to animate with a transform, and with a clip-animation at the same time... however this seems not to work well. – mainframeai Feb 07 '21 at 21:49
  • I tried to make a demo today, my clip-path property does not work in amp-animation, that is, there are no changes on the page. Does clip-path work for you? – Alexandr Kazakov Feb 08 '21 at 11:18
  • Yes. I got it kind of working in chrome. Not Safari though. You need to reference a svg clippath element. And then transform it via the scaleX property in the animation Keyframe. – mainframeai Feb 08 '21 at 15:18
  • Show me your code, which I can run. Here I tried it today: https://codepen.io/alexandr-kazakov/pen/rNMbPbW My clip-path doesn't work at all. Put your code on Codepen or here so I can run it. – Alexandr Kazakov Feb 08 '21 at 17:58
  • I have same issue, can't make clip-path work at all. In amp-animation documentation [link](https://amp.dev/documentation/components/amp-animation/?format=websites#allowed-properties-for-keyframes) it says that clip-path is supported, though can't find any examples... – la_petite_kozel Jun 25 '21 at 16:06

0 Answers0