What's the issue?

Often teaser grids or content sections use a simple animation to animate content as it becomes visible in the viewport, e.g. fade in with translation from bottom to final position. Other content, like graphs could profit from the same mechanic as they could animate their bar height/width as they become visible to draw the user attention to a specific topic in the viewport.

How do we reproduce the issue?

1. Create custom visibility animation

<amp-animation id="anim1" layout="nodisplay"
    trigger="visibility">
  ...
</amp-animation>

2. Trigger animation on element visible state change
   2.1 Could either be a configured as on attribute on amp-element

<amp-img id="elem1" layout="responsive" with="100" height="100"
    on="visible:anim1.start>
  ...
</amp-img>

2.2 Or as trigger on amp-animation

<amp-animation id="anim1" layout="nodisplay"
    trigger="elem1.visibility">
  ...
</amp-animation>

3. Happy designers

Adding this trigger should be fairly easy, since element visibility is calculated anyway to trigger loading. The same trigger on elements could also be used with amp-bind to set classes and start the animation with css.

What browsers are affected?

All browsers.

Which AMP version is affected?

Upcoming.