36 lines
2.1 KiB
HTML
36 lines
2.1 KiB
HTML
|
<template>
|
||
|
|
<style>
|
||
|
|
#root { position: absolute; inset: 0; font-family: "Inter", sans-serif; color: #eaf2ff; }
|
||
|
|
.tip { position: absolute; left: 192px; bottom: 108px; width: 1100px; }
|
||
|
|
.tip .num { display: inline-block; font-weight: 700; font-size: 28px; letter-spacing: 0.16em; color: var(--accent, #ff7a45); margin-right: 20px; }
|
||
|
|
.tip h2 { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 76px; line-height: 1.02; letter-spacing: 0.01em; }
|
||
|
|
.tip p { margin-top: 10px; font-weight: 500; font-size: 32px; line-height: 1.25; }
|
||
|
|
</style>
|
||
|
|
<div id="root" data-composition-id="tips" data-width="1920" data-height="1080">
|
||
|
|
<div id="tip1" class="clip tip" data-start="0.4" data-duration="2.0" data-track-index="0">
|
||
|
|
<h2>LOWER SLOWLY</h2><p><span class="num">01</span>Elbows close to your body</p>
|
||
|
|
</div>
|
||
|
|
<div id="tip2" class="clip tip" data-start="2.6" data-duration="2.0" data-track-index="0">
|
||
|
|
<h2>PUSH UP</h2><p><span class="num">02</span>Squeeze your chest and triceps</p>
|
||
|
|
</div>
|
||
|
|
<div id="tip3" class="clip tip" data-start="4.8" data-duration="2.4" data-track-index="0">
|
||
|
|
<h2>BODY STRAIGHT</h2><p><span class="num">03</span>Core tight, hips level</p>
|
||
|
|
</div>
|
||
|
|
<div id="tip4" class="clip tip" data-start="7.4" data-duration="2.7" data-track-index="0">
|
||
|
|
<h2>REPEAT WITH CONTROL</h2><p><span class="num">04</span>Breathe out as you push up</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
// Each tip blurs in, holds, and leaves faster than it arrived. Animate the children, never the .clip.
|
||
|
|
[["tip1", 0.4, 2.0], ["tip2", 2.6, 2.0], ["tip3", 4.8, 2.4], ["tip4", 7.4, 2.7]].forEach(([id, s, d]) => {
|
||
|
|
const kids = "#" + id + " > *";
|
||
|
|
tl.fromTo(kids, { opacity: 0, filter: "blur(8px)" },
|
||
|
|
{ opacity: 1, filter: "blur(0px)", duration: 0.22, ease: "power4.out", stagger: 0.06 }, s);
|
||
|
|
if (id !== "tip4") {
|
||
|
|
tl.to(kids, { opacity: 0, filter: "blur(8px)", duration: 0.14, ease: "power3.in" }, s + d - 0.2);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
window.__timelines["tips"] = tl;
|
||
|
|
</script>
|
||
|
|
</template>
|