Animate amp-img through position-observer: Failing with clip-path... Am I dumb?

138 Views Asked by At

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

0

There are 0 best solutions below