Scene 3

1<template id="scene-3-template">
2  <div data-composition-id="scene-3" data-width="1280" data-height="720" data-duration="2">
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      .outro {
13        font-size: 100px;
14        font-weight: 600;
15        color: #ffffff;
16      }
17    </style>
18    <div class="scene">
19      <div class="outro">Goodbye</div>
20    </div>
21    <script>
22      // Scene 3 (4-6s, local 0-2s): opacity 0->1 over 1s, linear.
23      const tl = gsap.timeline({ paused: true });
24      const scene = document.querySelector(".scene");
25      tl.set(scene, { opacity: 1 }, 0);
26      tl.fromTo(
27        scene.querySelector(".outro"),
28        { opacity: 0 },
29        { opacity: 1, duration: 1.0, ease: "none" },
30        0,
31      );
32      window.__timelines = window.__timelines || {};
33      window.__timelines["scene-3"] = tl;
34    </script>
35  </div>
36</template>