How to set an image placeholder for amp-anim in Google AMP ?

Last Updated : 16 Oct, 2020

If you want to embed an animation on your AMP webpage then you can do so with this tag. It helps the developer to embed animations, gif, webp, etc in your web platform. It is really a very useful tag as having animation on your website really make it tacky and good-looking.

Setup: To use amp-anim in your AMP webpage, you have to import this script.

HTML

<script async custom-element="amp-anim" src= 
"https://cdn.ampproject.org/v0/amp-anim-0.1.js"> 
</script>

It is similar to amp-img in most ways.

To add a placeholder we will be using amp-img to add a placeholder which will be displayed if the animation is not loaded.

HTML

<amp-img placeholder 
   src="#"> 
</amp-img>

Example:

HTML

<!doctype html> 
<html amp> 
  
<head> 
    <meta charset="utf-8"> 
    <title>Google AMP amp-anim</title> 
  
    <script async src= 
        "https://cdn.ampproject.org/v0.js"> 
    </script> 
      
    <!-- Import animation component in header -->
    <script async custom-element= 
        "amp-anim" src= 
"https://cdn.ampproject.org/v0/amp-anim-0.1.js"> 
    </script> 
  
    <meta name="viewport" content= 
"width=device-width,minimum-scale=1,initial-scale=1"> 
  
    <link rel="canonical" href= 
"https://amp.dev/documentation/examples/components/amp-anim/index.html"> 
  
    <style amp-boilerplate> 
        body { 
            -webkit-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
              
            -moz-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
              
            -ms-animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both; 
              
            animation: -amp-start 8s  
                steps(1, end) 0s 1 normal both 
        } 
  
        @-webkit-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-moz-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-ms-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @-o-keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
  
        @keyframes -amp-start { 
            from { 
                visibility: hidden 
            } 
  
            to { 
                visibility: visible 
            } 
        } 
    </style> 
    <noscript> 
        <style amp-boilerplate> 
            body { 
                -webkit-animation: none; 
                -moz-animation: none; 
                -ms-animation: none; 
                animation: none 
            } 
        </style> 
    </noscript> 
    <style amp-custom> 
        h1 { 
            color: forestgreen; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1> 
            Geeks For Geeks 
        </h1> 
    </center> 
      
    <amp-anim height="300" src= 
"https://media.giphy.com/media/xULW8rv9NSbHaEe9Ak/giphy.gif" 
        alt="an animation"
        attribution="GeeksForGeeks"> 
          
        <amp-img placeholder height="300"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20200811003251/logo.png"> 
        </amp-img> 
    </amp-anim> 
</body> 
  
</html>