AMP HTML timeout event to close lightbox after some time

Question

Is it possible in AMP HTML to close amp-lightbox component after a time delay? I have a lightbox shown after form submission success and I want to close it automatically after e.g. 5 seconds.

Answer 1

This is not possible with amp-lightbox, but you could build this using amp-bind and amp-animation. The basic idea is:

• define a multi-step amp-animation that shows and hides the lightbox
• start the animation on form submit success

Which would look like this:

<amp-animation id="snackbarSlideIn" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "500",
      "fill": "both",
      "easing": "ease-out",
      "iterations": "1",
      "selector": ".snackbar",
      "keyframes": [{
          "transform": "translateY(-100%)"
        },
        {
          "transform": "translateY(0)"
        }
      ],
      "animation": "snackbarSlideOut"
    }
  </script>
</amp-animation>
<amp-animation id="snackbarSlideOut" layout="nodisplay">
  <script type="application/json">
    {
      "delay": "3s",
      "duration": "500",
      "fill": "both",
      "easing": "ease-in",
      "iterations": "1",
      "selector": ".snackbar",
      "keyframes": [{
          "transform": "translateY(0)"
        },
        {
          "transform": "translateY(-100%)"
        }
      ]
    }
  </script>
</amp-animation>
<div class="snackbar">
  Success
</div>

<form on="submit-success:snackbarSlideIn.start" ...>...</form>

Here is a sample demonstrating how to use this approach to create a snackbar with AMP.