title: AMP animation on scroll
body: <p>Want to start animation while scrolling the image only once. How can I do that? "Is amp-position-observer" must need for animate on the scroll? </p>
  
  <pre><code>&lt;div class="section4"&gt;
      &lt;amp-position-observer on="enter:slideTransition2.start" intersection-ratios="0.1" layout="nodisplay"&gt;&lt;/amp-position-observer&gt;
      &lt;amp-img layout="responsive" alt="A view of the sea" class="eboardimg" src="/images/simbli-screens.png" width="969" height="376"&gt;&lt;/amp-img&gt;
      &lt;amp-animation id="slideTransition2" layout="nodisplay"&gt;
          &lt;script type="application/json"&gt;{
              "duration": "500ms",
              "fill": "both",
              "iterations": "1",
              "animations": [{
                  "selector": ".eboardimg",
                  "keyframes": [
                    { "transform": "translateY(20%)" },
                    { "transform": "translateY(0)" }
                  ]
              }]
          }
          &lt;/script&gt;
       &lt;/amp-animation&gt;
       &lt;a href="#" class="ampstart-btn LMbtn LMbtn4 travel-input-big rounded center bold white block col-12" &gt;
            LEARN MORE ABOUT THE CORE FOUR
          &lt;/a&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>