Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<script async custom-element="amp-anim" src=
</script>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!doctype html>
<html amp>
  
<head>
    <meta charset="utf-8">
    <title>Google AMP amp-anim</title>
  
    <script async src=
    </script>
      
    <!-- Import animation component in header -->
    <script async custom-element=
        "amp-anim" src=
    </script>
  
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
  
    <link rel="canonical" href=
  
    <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=
        alt="an animation"
        attribution="GeeksForGeeks">
          
        <amp-img placeholder height="300"
            src=
        </amp-img>
    </amp-anim>
</body>
  
</html>

chevron_right


Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :