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