<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p class="count count05">5</p>
<p class="count count04">4</p>
<p class="count count03">3</p>
<p class="count count02">2</p>
<p class="count count01">1</p>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.843,0,0,114.843,0,256c0,141.157,114.843,256,256,256s256-114.843,256-256C512,114.843,397.157,0,256,0z
M256,493.037C125.296,493.037,18.963,386.704,18.963,256C18.963,125.296,125.296,18.963,256,18.963S493.037,125.296,493.037,256
C493.037,386.704,386.704,493.037,256,493.037z" />
</g>
</g>
<g>
<g>
<path d="M395.444,145c-3.704-3.704-9.704-3.704-13.407,0l-49.546,49.546l-40.759-48.912c-3.361-4.014-9.315-4.569-13.361-1.213
c-4.018,3.352-4.565,9.329-1.213,13.352l47.407,56.889c1.713,2.046,4.194,3.282,6.861,3.403c0.139,0.005,0.287,0.009,0.426,0.009
c2.509,0,4.926-0.995,6.704-2.778l56.889-56.889C399.148,154.704,399.148,148.704,395.444,145z" />
</g>
</g>
<g>
<g>
<path d="M233.63,144.421c-4.037-3.356-10.009-2.801-13.361,1.213l-40.759,48.912L129.963,145c-3.704-3.704-9.704-3.704-13.407,0
c-3.704,3.704-3.704,9.704,0,13.408l56.889,56.889c1.778,1.782,4.194,2.778,6.704,2.778c0.139,0,0.287-0.005,0.426-0.009
c2.667-0.12,5.148-1.356,6.861-3.403l47.407-56.889C238.195,153.75,237.648,147.773,233.63,144.421z" />
</g>
</g>
<g>
<g>
<path d="M407.704,274.963c-5.241,0-9.482,4.246-9.482,9.482c0,62.736-63.796,113.778-142.222,113.778
s-142.222-51.042-142.222-113.778c0-5.236-4.241-9.482-9.481-9.482c-5.241,0-9.482,4.246-9.482,9.482
c0,73.194,72.306,132.741,161.185,132.741s161.185-59.546,161.185-132.741C417.185,279.209,412.944,274.963,407.704,274.963z" />
</g>
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
<button class="skip">Skip</button>
</body>
</html>body{
width: 100%;
height: 100vh;
}
p{
font-size: 200px;
opacity: 0;
visivility: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
svg{
position: absolute;
width: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visivility: hidden;
}
.skip{
font-size: 30px;
position: absolute;
right: 5%;
bottom: 5%;
background: none;
border: none;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
border-bottom: 1px solid #000;
}
.skip:hover{
opacity: 0.6;
}const tl = gsap.timeline();
tl.to(".count05", {scale: 0.6, duration: 1, autoAlpha:1});
tl.to(".count05", {duration: 0.1, autoAlpha:0});
tl.to(".count04", {scale: 0.6, duration: 1, autoAlpha:1});
tl.to(".count04", {duration: 0.1, autoAlpha:0});
tl.to(".count03", {scale: 0.6, duration: 1, autoAlpha:1});
tl.to(".count03", {duration: 0.1, autoAlpha:0});
tl.to(".count02", {scale: 0.6, duration: 1, autoAlpha:1});
tl.to(".count02", {duration: 0.1, autoAlpha:0});
tl.to(".count01", {scale: 0.6, duration: 1, autoAlpha:1});
tl.to(".count01", {duration: 0.1, autoAlpha:0});
tl.to(".skip", {duration: 0.1, autoAlpha: 0});
tl.to("svg", {duration: 1, autoAlpha: 1});
tl.to("svg", {rotation: -30, duration: 1, ease: "elastic"});
const skip = document.querySelector(".skip");
skip.addEventListener("click", () => {
tl.seek(5.5);
});
External CSS
This Pen doesn't use any external CSS resources.