Meta / Script

Load external Javascript libraries.

from h2o_wave import site, ui

# This example displays animated text using using anime.js (https://animejs.com/).
# Original example by Tobias Ahlin https://tobiasahlin.com/moving-letters/#2

page = site['/demo']

html = '''
<style>
.anim {
  font-weight: 900;
  font-size: 3.5em;
  color: #e8500d;
}
.anim .letter {
  display: inline-block;
  line-height: 1em;
}
</style>

<h1 id="animation" class="anim">Moving Letters!</h1>
'''

script = '''
// Wrap every letter in a span
var textWrapper = document.querySelector('.anim');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.anim .letter',
    scale: [4,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 950,
    delay: (el, i) => 70*i
  }).add({
    targets: '.anim',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });
'''

# Add a placeholder for the animation.
page['example'] = ui.markup_card(
    box='1 1 6 8',
    title='Animation',
    content=html,
)

# Add the script to the page.
page['meta'] = ui.meta_card(
    box='',
    # Load anime.js
    scripts=[ui.script(path='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js')],
    script=ui.inline_script(
        # The Javascript code for this script.
        content=script,
        # Execute this script only if the 'anime' library is available.
        requires=['anime'],
        # Execute this script only if the 'animation' element is available.
        targets=['animation'],
    ))

page.save()