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>
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.