Solusi Tidak Bisa Menggunakan AMP Animation Dengan Lebih Dari Satu Animasi

Assalamu'alaikum..
Semangat Pagi..

Tutorial kali ini mengenai tidak bisanya menggunakan 2 (dua) atau lebih dalam penggunaan amp-animation di template AMP .

Template yang saya gunakan ini menggunakan animasi scroll to top dan animasi show/hide social share , akan tetapi hanya satu yang bisa muncul dihalaman.

Sebelum menerapkan amp animasi , pastikan komponen custom element sudah di persiapkan , yaitu :

<script async='async' custom-element='amp-position-observer' src='https://cdn.ampproject.org/v0/amp-position-observer-0.1.js'/>
<script async='async' custom-element='amp-animation' src='https://cdn.ampproject.org/v0/amp-animation-0.1.js'/>

Letakkan custom element tersebut diatas ke dalam tag head

Dibawah ini adalah amp-animation yang saya gunakan :

<!-- TopSlideShareBuzz Start -->
<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
<amp-animation id="showAnim" layout="nodisplay">
<script type="application/json"> { "duration": "200ms", "fill": "both", "iterations": "1", "direction": "alternate", "animations": [ { "selector": "#topSlideShareBuzzButton", "keyframes": [ { "opacity": "1", "visibility": "visible" } ] } ] }
</script>
</amp-animation>
<amp-animation id="hideAnim" layout="nodisplay">
<script type="application/json"> { "duration": "200ms", "fill": "both", "iterations": "1", "direction": "alternate", "animations": [ { "selector": "#topSlideShareBuzzButton", "keyframes": [ { "opacity": "0", "visibility": "hidden" } ] } ] }
</script>
</amp-animation>

<div id="topSlideShareBuzzButton" class="topSlideShareBuzz" >
<div class='share-buzz'>
<amp-social-share height='44px' layout='responsive' type='whatsapp' width='60px'/>
<amp-social-share data-param-app_id='100000442213850' height='44px' layout='responsive' type='facebook' width='60px'/>
<amp-social-share height='44px' layout='responsive' type='twitter' width='60px'/>
<amp-social-share height='44px' layout='responsive' type='line' width='60px'/>
<amp-social-share height='44px' layout='responsive' type='sms' width='60px'/>
<amp-social-share height='44px' layout='responsive' type='system' width='60px'/>
</div>
</div>
<div class="trigger">
<amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay">
</amp-position-observer>
</div>
</b:if>
<!-- End TopSlideShareBuzz -->

<!-- Scroll Kaluhur Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;error_page&quot;'>
<amp-animation id="showAnim" layout="nodisplay">
<script type="application/json"> { "duration": "200ms", "fill": "both", "iterations": "1", "direction": "alternate", "animations": [{ "selector": "#scrollKaLuhurButton", "keyframes": [{ "opacity": "1", "visibility": "visible" }] }] }
</script>
</amp-animation>
<amp-animation id="hideAnim" layout="nodisplay">
<script type="application/json"> { "duration": "200ms", "fill": "both", "iterations": "1", "direction": "alternate", "animations": [{ "selector": "#scrollKaLuhurButton", "keyframes": [{ "opacity": "0", "visibility": "hidden" }] }] }
</script>
</amp-animation>
<div id="marker">
<amp-position-observer on="enter:hideAnim.start; exit:showAnim.start" layout="nodisplay">
</amp-position-observer>
</div>
<button id="scrollKaLuhurButton" on="tap:kaluhur.scrollTo(duration=200)" class="scrollKaLuhur">
<svg viewBox="0 0 24 24">
<path fill="#fff" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
</svg>
</button>
</b:if>
<!-- End Scroll Kaluhur -->

Setelah berulang kali melakukan trial error , akhirnya saya mencoba untuk mengganti ANIMATION ID tersebut dengan id animasi yang lain ,
pada id animasi scroll to top inilah yang saya coba ganti , dari showAnim menjadi fadeTransition dan hideAnim menjadi slideTransition.

Hasilnya.. animasi scroll to top dan show/hide social share bisa muncul di halaman.
Pertanyaannya kenapa dengan hanya mengganti id animation masalah sebelumnya bisa terselesaikan?
Dari sini saya belum paham kenapa bisa begitu😁 , saya coba cari jawabannya di search engine belum ketemu juga.

Saya menganggap ini terjadi crash kedua animasi id yang sama ketika digunakan berbarengan pada id html , artinya ketika animation id di gunakan lebih dari satu id html maka hanya satu id html yang bisa bekerja , entahlah..😁, mudah-mudahan saya salah kaprah mengartikannya..😅😅

Demikianlah tutorial ini saya buat..
Semoga bermanfaat..
Selamat berkreasi..

Semangat Berbagi...