Search code examples
cssfrontendamp-html

Remove a div in AMP-Animation on scroll down

Help required from people working on Google-AMP.

I am trying to hide a particular part of a div( an item from navbar) while scrolling down.

Let say I need to hide this div.

<div id="divToHide">This div is to hide on scroll down. </div>

AMP Animation Code:

<amp-animation id="hideDiv"
  layout="nodisplay">
  <script type="application/json">
    {
      "duration": "200ms",
      "fill": "both",
      "iterations": "1",
      "direction": "alternate",
      "animations": [{
        "selector": "#divToHide",
        "keyframes": [{
          "display": "none"
        }]
      }]
    }
  </script>
</amp-animation>

AMP position observer code:

<amp-position-observer on="enter:hideDiv.start" layout="nodisplay"></amp-position-observer>

When I change display: none to the following "opacity": "0", "visibility": "hidden".

The div content disappears but still it takes the space. It should not take space as display: none does. Help me workout for display none type solution.

Solution

  • Display none is not allowed in keyframes in amp animation. Although this is not going to work for every case. But anyhow this worked for me.

    I moved element out of screen and it seemed as hidden. Here is the solution.

    "keyframes": [{
   "transform": "translateY(-80px)"
}]

    A trick for element somewhere between the viewport you can simply move it on X axis i.e.100vw

    "transform": "translateY(100vw)"
or
"transform": "translateY(200vw)"

    The second one is more secure.

    Hopes this would help. Thanks