Scene 2

1<template id="scene-2-template">
2  <div data-composition-id="scene-2" 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      .square {
13        width: 200px;
14        height: 200px;
15        opacity: 0;
16        transform: scale(0.8);
17      }
18    </style>
19    <div class="scene">
20      <img class="square" src="../assets/square.png" alt="" />
21    </div>
22    <script>
23      // Scene 2 (2-4s, local 0-2s): opacity 0->1 over 0.5s, scale 0.8->1.0 over 2s, both linear.
24      const tl = gsap.timeline({ paused: true });
25      const scene = document.querySelector(".scene");
26      const square = scene.querySelector(".square");
27      tl.set(scene, { opacity: 1 }, 0);
28      tl.to(square, { opacity: 1, duration: 0.5, ease: "none" }, 0);
29      tl.to(square, { scale: 1.0, duration: 2.0, ease: "none" }, 0);
30      tl.set(scene, { opacity: 0 }, 2);
31      window.__timelines = window.__timelines || {};
32      window.__timelines["scene-2"] = tl;
33    </script>
34  </div>
35</template>