`videos/deals/index.html`

108 lines
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1920, height=1080" />
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0a0e14; }
      body { font-family: "Georgia", "Times New Roman", serif; color: #f4f6f8; }
      .sans { font-family: "Helvetica Neue", Arial, sans-serif; }
      #root { position: relative; width: 1920px; height: 1080px; overflow: hidden;
        background: radial-gradient(1400px 900px at 40% 30%, #16202e 0%, #0a0e14 70%); }
      .scene { position: absolute; inset: 0; display: flex; flex-direction: column;
        align-items: center; justify-content: center; opacity: 0; }
      .red { color: #c8102e; }
      .kicker { letter-spacing: 8px; text-transform: uppercase; font-size: 26px; color: #8fa3b8; }
      .headline { font-size: 92px; line-height: 1.05; text-align: center; max-width: 1500px; font-weight: 700; }
      .breaking { font-family: "Helvetica Neue", Arial, sans-serif; background:#c8102e; color:#fff;
        padding:10px 26px; letter-spacing:5px; text-transform:uppercase; font-size:24px; font-weight:700; }
      /* deal card */
      .amt { font-size: 200px; font-weight: 700; letter-spacing:-4px; line-height:1; }
      .buyer { font-size: 58px; font-weight:700; margin-top:14px; }
      .loc { font-family:"Helvetica Neue",Arial,sans-serif; letter-spacing:5px; text-transform:uppercase;
        font-size:28px; color:#8fa3b8; margin-top:16px; }
      .cat { display:inline-block; font-family:"Helvetica Neue",Arial,sans-serif; font-size:20px; letter-spacing:3px;
        text-transform:uppercase; color:#c8102e; border:1px solid #c8102e; padding:6px 16px; margin-top:22px; }
      .sect span { font-family:"Helvetica Neue",Arial,sans-serif; font-size:34px; letter-spacing:5px;
        text-transform:uppercase; color:#b9c6d4; opacity:0; margin:0 22px; }
      .wordmark { font-weight:700; letter-spacing:-2px; }
    </style>
  </head>
  <body>
    <div id="root" data-composition-id="main" data-start="0" data-duration="18.4" data-width="1920" data-height="1080">

      <div id="s1" class="scene clip" data-start="0" data-duration="4" data-track-index="1">
        <div class="breaking" id="s1b">Breaking</div>
        <div class="headline" style="margin-top:34px">The West's biggest deals<br/><span class="red">break here first.</span></div>
      </div>

      <div id="s2" class="scene clip" data-start="4" data-duration="3.2" data-track-index="1">
        <div class="amt red">$124M</div>
        <div class="buyer">Camden Property Trust</div>
        <div class="loc">Gilbert, AZ</div>
        <div class="cat">Multifamily</div>
      </div>

      <div id="s3" class="scene clip" data-start="7.2" data-duration="2.6" data-track-index="1">
        <div class="amt">$30M</div>
        <div class="buyer">CentrePoint Properties</div>
        <div class="loc">Colorado</div>
        <div class="cat">Retail</div>
      </div>

      <div id="s4" class="scene clip" data-start="9.8" data-duration="2.9" data-track-index="1">
        <div class="amt red">$132M</div>
        <div class="buyer">Eagle Partners &amp; Vistria</div>
        <div class="loc">Garden Grove, CA</div>
        <div class="cat">Mixed-Income</div>
      </div>

      <div id="s5" class="scene clip" data-start="12.7" data-duration="2.6" data-track-index="1">
        <div class="sect" style="text-align:center">
          <span>Financing</span><span>Leases</span><span>Development</span><span>Sales</span>
        </div>
      </div>

      <div id="s6" class="scene clip" data-start="15.3" data-duration="3.1" data-track-index="1">
        <div class="headline" style="font-size:66px">If it closed out West,<br/>it's on</div>
        <div class="wordmark" style="font-size:120px; margin-top:20px">REN<span class="red">TV</span>.com</div>
      </div>

      <audio id="vo" src=".media/narration.wav" data-start="0" data-duration="18.4" data-track-index="10" data-volume="1"></audio>
    </div>

    <script>
      window.__timelines = window.__timelines || {};
      const tl = gsap.timeline({ paused: true });
      const card = (id, t) => {
        tl.fromTo("#"+id, {opacity:0}, {opacity:1, duration:0.45}, t)
          .from("#"+id+" .amt", {scale:0.8, y:20, duration:0.7, ease:"power3.out"}, t+0.05)
          .from("#"+id+" .buyer", {opacity:0, y:18, duration:0.5}, t+0.35)
          .from("#"+id+" .loc", {opacity:0, y:12, duration:0.5}, t+0.5)
          .from("#"+id+" .cat", {opacity:0, duration:0.5}, t+0.65);
      };
      // s1
      tl.fromTo("#s1", {opacity:0}, {opacity:1, duration:0.5}, 0.1)
        .from("#s1b", {scale:0.8, opacity:0, duration:0.5, ease:"back.out(2)"}, 0.2)
        .from("#s1 .headline", {opacity:0, y:30, duration:0.8, ease:"power3.out"}, 0.6)
        .to("#s1", {opacity:0, duration:0.4}, 3.7);
      // deal cards
      card("s2", 4.05); tl.to("#s2", {opacity:0, duration:0.35}, 6.95);
      card("s3", 7.25); tl.to("#s3", {opacity:0, duration:0.35}, 9.55);
      card("s4", 9.85); tl.to("#s4", {opacity:0, duration:0.35}, 12.45);
      // s5 sections
      tl.fromTo("#s5", {opacity:0}, {opacity:1, duration:0.4}, 12.75)
        .to("#s5 .sect span", {opacity:1, stagger:0.18, duration:0.4}, 12.9)
        .to("#s5", {opacity:0, duration:0.4}, 15.0);
      // s6 signoff
      tl.fromTo("#s6", {opacity:0}, {opacity:1, duration:0.5}, 15.4)
        .from("#s6 .headline", {opacity:0, y:24, duration:0.7}, 15.5)
        .from("#s6 .wordmark", {opacity:0, scale:0.9, duration:0.8, ease:"power3.out"}, 16.0);

      window.__timelines["main"] = tl;
    </script>
  </body>
</html>