https://royalduckusa.com/hero.js

1(function () {
2  'use strict';
3
4  /* Hide placeholder image once Cloudflare Stream iframe has loaded */
5  (function () {
6    var frame = document.getElementById('heroFrameIframe');
7    var poster = document.getElementById('heroFramePoster');
8    if (!frame || !poster) return;
9    function hidePoster() {
10      poster.classList.add('is-hidden');
11    }
12    frame.addEventListener('load', hidePoster, { once: true });
13  })();
14
15  function splitA(sel, tl, t, gsap) {
16    var el = document.querySelector(sel);
17    if (!el || !gsap) return;
18    var html = el.innerHTML;
19    var out = '';
20    var tag = false;
21    var word = '';
22
23    function flushWord() {
24      if (!word) return;
25      out += '<span class="h1-word">';
26      for (var j = 0; j < word.length; j++) {
27        out += '<span class="ch">' + word[j] + '</span>';
28      }
29      out += '</span>';
30      word = '';
31    }
32
33    for (var i = 0; i < html.length; i++) {
34      var c = html[i];
35      if (tag) {
36        out += c;
37        if (c === '>') tag = false;
38        continue;
39      }
40      if (c === '<') {
41        flushWord();
42        tag = true;
43        out += c;
44        continue;
45      }
46      if (c === ' ' || c === '\n') {
47        flushWord();
48        out += c;
49        continue;
50      }
51      word += c;
52    }
53    flushWord();
54    el.innerHTML = out;
55    var chars = el.querySelectorAll('.ch');
56    if (chars.length) {
57      tl.fromTo(chars,
58        { opacity: 0, y: gsap.utils.random(18, 45, 5, true), scale: .4, rotation: gsap.utils.random(-18, 18, 5, true) },
59        { opacity: 1, y: 0, scale: 1, rotation: 0, duration: .45, stagger: .018, ease: 'back.out(2)' },
60        t
61      );
62    }
63  }
64
65  function addHeroToTimeline(tl) {
66    if (!window.gsap || !tl) return;
67    var gsap = window.gsap;
68
69    splitA('#hTitle', tl, 0.5, gsap);
70    var hBtns = document.querySelector('#hBtns');
71    if (hBtns) tl.fromTo('#hBtns .btn', { opacity: 0, y: 24, scale: 0.9 }, { opacity: 1, y: 0, scale: 1, duration: 0.4, stagger: 0.08, ease: 'back.out(2)' }, '+=.04');
72    tl.call(function () { if (window.confetti) window.confetti(); }, [], '-=.05');
73
74  }
75
76  window.addHeroToTimeline = addHeroToTimeline;
77})();