Alternate text in AMP

Question

I'd like to have a line of text fade in fast, stay up for about 5 seconds, fade out fast, then have a different line of text fade in fast, stay for about 5 seconds, fade out fast, then have this repeat infinitely in AMP. What's the best way to do this? Here is what I had that's not working: I was thinking AMP-Animation might be the best way to achieve this, but nothing is happening on the page and I haven't even gotten to making each fade and last 5 seconds yet.

The thought here was to use table rows with oppositely alternating visibility:visible visibility:collapse animations since I want each line of text to appear in the same spot. So I'd have 2 table rows with text inside them each alternating opposite each other between visible for 5 seconds and collapse for 5 seconds. To the viewer, the hope is it just looks like one line of text with two sentences alternating between each other. Boilerplate, etc. are coded correctly (it passes as a valid AMP page), but I didn't include header code here to save space.

<body>
        <amp-animation layout="nodisplay" trigger = "visibility">
            <script type="application/json">
      {
        "selector": ".NoticesTable1",
        "duration": "8s",
        "easing": "ease",
        "iterations": "infinite",
        "keyframes": 
            {"transform": ["visibility:collapse", "visibility:visible"]}

        }
        </script>
            </amp-animation>

        <amp-animation layout="nodisplay" trigger="visibility">
        <script type="application/json">
      {
        "selector": ".NoticesTable2",
        "duration": "8s",
        "easing": "ease",
        "iterations": "infinite",
        "keyframes":    
        {"transform": ["visibility:visible", "visibility:collapse"]}
        }
        </script>
            </amp-animation>
        <div class="NoticesBackground"><table class="NoticesTable">
<tr class="NoticesTable1"><p class="Notices">Text 1 here</p></tr>
        <tr class="NoticesTable2"><p class="Notices2">Text 2 here</p></tr>
        </table></div>

This is easy to do in `amp-story`. Take a look at that. You can put an amp-story as part of a standard amp-html page. — Jay Gray, Jun 14 '20 at 12:12
Thanks for that Jay Gray. I was looking into amp-story, but wasn't sure if search engines would penalize me since I'm using it for something that's not it's purpose (not a news article/journal/story). It did seem like it would be easier and I may check that out. — proStrategist, Jun 15 '20 at 21:58

Rohit Ambre · Accepted Answer · 2020-06-16T10:54:19.163

I tested your code in AMP playground and noticed <table> and <tr> elements are not visible when inspected in developer tool. I am not sure why such behavior with table elements.

With amp-observer i can able to trigger animations, here is working code. Where i used <p> element classes for amp animation selector

<amp-animation id="anime1" layout="nodisplay">
    <script type="application/json">
          {
            "duration": "8s",
            "fill": "both",
            "direction": "reverse",
            "animations": [
              {
                "selector": ".Notices",
                "keyframes": {"opacity": [1, 0]}
              }
            ]
          }
    </script>
</amp-animation>

<amp-animation id="anime2" layout="nodisplay">
     <script type="application/json">
          {
            "duration": "8s",
            "fill": "both",
            "direction": "reverse",
            "animations": [
              {
                "selector": ".Notices2",
                "keyframes": {"opacity": [1, 0]}
              }
            ]
          }
    </script>
</amp-animation>


    <div class="NoticesBackground">
      <table class="NoticesTable">
        <tr class="NoticesTable1">
          <amp-position-observer on="enter:anime1.start" layout="nodisplay">
          </amp-position-observer>

          <p class="Notices">Text 1 here</p>
       </tr>
        <tr class="NoticesTable2">

             <amp-position-observer on="enter:anime2.start" layout="nodisplay">
            </amp-position-observer>
          <p class="Notices2">Text 2 here</p>
        </tr>
    </table>

If trigger is not required based in each <p> tag visibility you can go for single amp-observer before <table> element.

Thank you Rohit for taking the time to check this out. I plugged that code in, but all I saw was the two lines of text one on top of the other: do I need to do something to trigger the animation? I'm hoping for something that makes it look like two texts alternating between each other in the same spot and not one over the other. Maybe your code does that and I'm not understanding something. Jay Gray suggested amp-story: do you think that is a way to go or should I dig into understanding your code better? — proStrategist, Jun 15 '20 at 22:00
Hi @proStrategist, To trigger animation you can use amp-observer component. In this case on="enter:anime1.start", It's a trigger for anime1 on enter to start animation. You can add offset here as well. Check official document for amp-position-observer. For text appearing one above other, you can use normal CSS to arrange them as required, also table is definitely not needed here for text placement. I have not worked with amp-stories much, That's depends on what kind of website or page you are working on. Check out amp-animations and amp-position-observer from amp documents. — Rohit Ambre, Jun 16 '20 at 11:02
Thank you Rohit, this was excellent advice. I was able to do just as you said: used CSS to position one on top of the other and targeted
's rather than a table. Also, I think my syntax was off with the animation. Once I had it animating, I was easily able to tweak the animation and CSS. I used trigger = "visibility" so it starts up on page load without needing a button press rather than position-observer and I used infinite so it repeats indefinitely. — proStrategist, Jun 25 '20 at 03:52

Alternate text in AMP

1 Answers1