Scene 3

1<template id="scene-3-template">
2  <div data-composition-id="scene-3" data-width="1280" data-height="720" data-duration="3">
3    <style>
4      .scene {
5        position: absolute;
6        inset: 0;
7        display: flex;
8        align-items: center;
9        justify-content: center;
10        opacity: 0;
11      }
12      .scene-3 .outro-wrap {
13        position: relative;
14        display: inline-block;
15        opacity: 0;
16      }
17      .scene-3 .outro-text {
18        font-size: 80px;
19        font-weight: 600;
20      }
21      .scene-3 .outro-underline {
22        position: absolute;
23        left: 0;
24        bottom: -8px;
25        width: 100%;
26        height: 6px;
27        background: #fbbf24;
28        border-radius: 3px;
29        transform: scaleX(0);
30        transform-origin: left center;
31      }
32    </style>
33    <div class="scene scene-3">
34      <div class="outro-wrap">
35        <div class="outro-text">thanks for watching</div>
36        <div class="outro-underline"></div>
37      </div>
38    </div>
39    <script>
40      // Remotion: <Sequence 210..300> OutroScene.
41      const tl = gsap.timeline({ paused: true });
42      const scene = document.querySelector(".scene-3");
43      tl.set(scene, { opacity: 1 }, 0);
44      tl.to(scene.querySelector(".outro-wrap"), { opacity: 1, duration: 0.4, ease: "none" }, 0);
45      // interpolate(frame, [10,40], [0,1]) for the underline -> starts 0.333s, 1s long
46      tl.to(
47        scene.querySelector(".outro-underline"),
48        { scaleX: 1, duration: 1.0, ease: "none" },
49        0.333,
50      );
51      window.__timelines = window.__timelines || {};
52      window.__timelines["scene-3"] = tl;
53    </script>
54  </div>
55</template>