<svg width="" height="" viewBox="">
<defs>
<clipPath id="text-clip-path">
<rect x="0" y="0" width="500" height="250" />
</clipPath>
</defs>
<g id="circleHolder" transform="translate(250 250)">
<circle cx="0" cy="0" r="400" fill="black" stroke="none" />
</g>
<g id="lineHolder" transform="translate(250 250) scale(1 1)">
<path d="M-250,0 h500" stroke="white" stroke-width="2" />
</g>
<g id="textHolder" clip-path="url(#text-clip-path)">
<text x="90" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">T</text>
<text x="115" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">E</text>
<text x="140" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">X</text>
<text x="165" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">T</text>
<text x="215" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">A</text>
<text x="240" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">N</text>
<text x="265" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">I</text>
<text x="290" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">M</text>
<text x="315" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">A</text>
<text x="340" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">T</text>
<text x="365" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">I</text>
<text x="390" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">O</text>
<text x="415" y="230" text-anchor="middle" dominant-baseline="middle" class="letter">N</text>
</g>
</svg>
<div class="buttonHolder">
<button id="play" class="text-black bg-gray-200 py-2 px-2 my-5 hover:bg-gray-300 rounded">play</button>
<button id="pause" class="text-black bg-gray-200 py-2 px-2 my-5 hover:bg-gray-300 rounded">pause</button>
<button id="reverse" class="text-black bg-gray-200 py-2 px-2 my-5 hover:bg-gray-300 rounded">reverse</button>
<button id="restart" class="text-black bg-gray-200 py-2 px-2 my-5 hover:bg-gray-300 rounded">restart</button>
</div>
<label>
<span id="slider-label">animation scrubber</span>
<input id="speed-slider" type="range" value="0" min="0" max="1" step="0.01" class="h-5 w-full cursor-ew-resize appearance-none rounded-full bg-gray-200 disabled:cursor-not-allowed">
</label>
// svg variables
const viewportWidth = 500;
const viewportHeight = 500;
const viewBoxWidth = 500;
const viewBoxHeight = 500;
const w = viewBoxWidth;
const h = viewBoxHeight;
const dur = 1;
// tween variables
let theTween = null;
// ui
const playButton = document.querySelector("#play");
const pauseButton = document.querySelector("#pause");
const reverseButton = document.querySelector("#reverse");
const restartButton = document.querySelector("#restart");
const scrubber = document.querySelector("#scrubber");
initSVG();
animate();
function initSVG() {
const svg = document.querySelector("svg");
svg.setAttribute("width", `${viewportWidth}`);
svg.setAttribute("height", `${viewportHeight}`);
svg.setAttribute("viewBox", `0 0 ${w} ${h}`);
}
function animate(){
theTween = gsap.timeline();
theTween.fromTo(
"#circleHolder",
{ attr: { transform: "translate(250 -30) scale(.03)"} },
{ attr: { transform: "translate(250 250) scale(.03)"}, duration: dur, ease:"back"}
).fromTo(
"#circleHolder",
{ attr: { transform: "translate(250 250) scale(.03)"} },
{ attr: { transform: "translate(250 250) scale(1)"}, duration: dur}
).fromTo(
"#lineHolder",
{ attr: { transform: "translate(250 250) scale(0 1)"} },
{ attr: { transform: "translate(250 250) scale(1 1)"}, duration: dur}
).fromTo(
".letter",
{ attr: { y:330} },
{ attr: { y:230 }, duration: dur, stagger:.1, ease:"back"}
);
}
