<!DOCTYPE html>
<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.

External JavaScript

  1. https://unpkg.co/[email protected]/dist/gsap.min.js