<main>
  <div class="intro">
  Scroll down :) <br />
  Till the end for victory
  </div>
</main>
<section class="chicky-run-container">
  <svg class="chick-in-shell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.49 153.93" aria-hidden="true">
    <g fill="#010101">
      <path d="m108.39 84.79-.35-8.01L97.1 87.32l-7.67-7.39c-.93-4.48-2.03-8.67-3.1-12.42-1.12-3.93-2.2-7.39-2.99-10.13 1.15-1.51 2.18-3.11 3.09-4.79 2.13-.7 11.99-3.92 16.38-4.8-2.73-7.27-10.87-11.19-12.17-11.78v-.26c0-4.93-1-9.64-2.81-13.92A35.817 35.817 0 0 0 74.88 6.11C69.2 2.25 62.3 0 54.91 0c-4.93 0-9.64 1-13.92 2.81a35.817 35.817 0 0 0-15.72 12.95 35.65 35.65 0 0 0-6.11 19.99c0 6.48 1.74 12.57 4.76 17.81l-7.13 28.85-5.1 4.91-11.2-10.8-.37 7.98C.05 86.1 0 87.71 0 89.35c0 11.21 1.67 20.87 4.64 29.07 2.23 6.15 5.19 11.47 8.71 15.98 5.28 6.76 11.79 11.68 18.84 14.86 7.05 3.19 14.61 4.67 22.06 4.67 6.63 0 13.34-1.17 19.7-3.67 4.77-1.88 9.34-4.5 13.49-7.93 6.24-5.14 11.54-12.09 15.24-20.9 3.7-8.81 5.81-19.47 5.81-32.07 0-1.54-.04-3.06-.1-4.57ZM30.84 51.03a28.367 28.367 0 0 1-4.45-15.28c0-3.95.8-7.69 2.24-11.1 2.16-5.11 5.78-9.47 10.33-12.55A28.396 28.396 0 0 1 54.9 7.23c3.95 0 7.69.8 11.1 2.24 5.11 2.16 9.47 5.78 12.55 10.34a28.318 28.318 0 0 1 4.87 15.94c0 7.06-2.56 13.49-6.81 18.48l-1.23 1.45.49 1.84c.87 3.23 2.17 7.28 3.51 11.98.54 1.88 1.07 3.86 1.59 5.92l-12.35 11.9-14.24-13.73-14.24 13.73L26.3 73.98l5.35-21.64-.83-1.31Zm66.21 64.92c-1.98 5.48-4.58 10.11-7.61 13.99-4.55 5.82-10.08 9.99-16.12 12.72-6.04 2.74-12.58 4.03-19.08 4.03-5.77 0-11.59-1.02-17.05-3.17a42.56 42.56 0 0 1-11.54-6.78c-5.32-4.4-9.89-10.33-13.17-18.12-2.92-6.94-4.8-15.38-5.18-25.48l4.38 4.22 9.6-9.26 1.45.36.57-2.3 2.62-2.53 14.24 13.73L54.4 83.63l14.24 13.73 14.18-13.67c.09.46.18.93.26 1.4l1.1-.19 12.93 12.47 2.51-2.42 1.56-1.51c-.35 8.72-1.83 16.19-4.12 22.52Z" />
      <path class="chicky-eye" d="M57.1 40.86c3.63 0 6.57-2.94 6.57-6.57s-2.94-6.57-6.57-6.57-6.57 2.94-6.57 6.57 2.94 6.57 6.57 6.57Z" />
    </g>
    <path fill="#fff" d="M97.1 97.36 84.17 84.89s-1.28-.74-1.36-1.2L68.63 97.36 54.39 83.63 40.15 97.36 25.91 83.63l-2.62 2.53-2.01 1.94-9.6 9.26-4.38-4.22c.38 10.1 2.26 18.54 5.18 25.48 3.28 7.79 7.85 13.73 13.17 18.12a42.56 42.56 0 0 0 11.54 6.78c5.46 2.15 11.28 3.17 17.05 3.17 6.49 0 13.04-1.3 19.08-4.03 6.04-2.74 11.57-6.9 16.12-12.72 3.03-3.88 5.63-8.52 7.61-13.99 2.3-6.33 3.77-13.8 4.12-22.52l-1.56 1.51-2.51 2.42Z" />
    <path fill="#f3bd19" d="M40.16 87.32 54.4 73.59l14.24 13.73 12.35-11.9c-.52-2.06-1.06-4.04-1.59-5.92-1.34-4.7-2.64-8.75-3.51-11.98l-.49-1.84 1.23-1.45c4.25-4.99 6.8-11.42 6.81-18.48 0-5.92-1.79-11.38-4.87-15.94A28.767 28.767 0 0 0 66.02 9.47a28.428 28.428 0 0 0-11.1-2.24c-5.92 0-11.39 1.79-15.94 4.87a28.677 28.677 0 0 0-10.33 12.55 28.428 28.428 0 0 0-2.24 11.1c0 5.64 1.63 10.86 4.45 15.28l.83 1.31-5.35 21.64 13.84 13.34Zm16.94-59.6c3.63 0 6.57 2.94 6.57 6.57s-2.94 6.57-6.57 6.57-6.57-2.94-6.57-6.57 2.94-6.57 6.57-6.57Z" />
  </svg>
  <svg class="eggshell" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.11 80.54" aria-hidden="true">
    <path d="M99.91,20.7l-15.3-15.61-15.17,15.61-15.23-15.68-15.23,15.68L23.73,5.02l-2.8,2.88-2.16,2.22-10.27,10.58L3.82,15.88c.41,11.54,2.42,21.17,5.54,29.1,3.51,8.9,8.4,15.68,14.09,20.7,3.8,3.34,7.97,5.9,12.35,7.75,5.84,2.45,12.07,3.62,18.24,3.62,6.95,0,13.96-1.48,20.41-4.6,6.46-3.13,12.38-7.88,17.25-14.53,3.24-4.43,6.02-9.72,8.14-15.98,2.46-7.23,4.04-15.76,4.41-25.71l-1.67,1.72-2.69,2.76Z" fill="#fff" stroke="#010101" stroke-miterlimit="10" stroke-width="7" />
  </svg>

  <svg class="chicky-walk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.99 154.26" aria-hidden="true">
    <path d="M122.94,41.18c.97-51.24-76.27-39-52.67,17.75,.1,3.97-4.34,6.12-7.81,6.05-26.67-2.87-75.9-3.69-42.67,32.57,9.5,4.29,20.33,6.37,27.5,6.09,1.15,0,2.25,.62,2.71,1.68,2.72,9.08-23,2.14-28.55,.36,17.75,43.95,80.13,30.39,81.02-15.67-2.86-34.97-1.12-16.09,16.37-37.33,2.68-.02,6.03-.1,8.3-.33,1.19-.11,2.23-.24,3.09-.39-1.53-3.94-3.9-7.79-7.27-10.76Z" fill="#f3bd19" />
    <g>
      <path d="M139.99,52.63c-1.87-5.05-3.42-9.49-8.12-15C126.86-24.51,38.76-3.7,61.38,56.5c-37.75-4.81-85.58,3.38-47.28,47.49,5.52,9.8,11.13,21.31,20.75,27.61,31.03,22.67,77.14-3.12,76.19-41.35h0c.3-5.98-1.76-13.74-.97-19.5,5.28-2.39,9.87-5.96,13.47-10.38,6.33-.69,16.62,.5,16.45-7.74Zm-12.86-.29c-2.27,.22-5.61,.31-8.3,.33-17.51,21.27-19.23,2.31-16.35,37.46v-.44c-.62,46.31-63.25,60.03-81.04,15.98,5.56,1.78,31.27,8.72,28.55-.36-.45-1.05-1.56-1.68-2.71-1.68-7.16,.29-18-1.8-27.5-6.09C-13.43,61.29,35.8,62.1,62.47,64.98c3.47,.07,7.91-2.08,7.81-6.05C46.68,2.17,123.92-10.07,122.95,41.18c3.37,2.97,5.74,6.82,7.27,10.76-.86,.15-1.9,.29-3.08,.39Z" fill="#010101" />
      <path class="chicky-eye" d="M101.97,33.37c-2.56,0-4.63,2.07-4.63,4.63s2.07,4.63,4.63,4.63,4.63-2.08,4.63-4.63c0-2.56-2.07-4.63-4.63-4.63Z" fill="#010101" />
      <path class="leg-left" d="M57.05,138.3l-7.62,15.96h23.05v-7h-11.95l3.7-7.76" fill="#010101" />
      <path class="leg-right" d="M80.76,134.62l9.58,15.06,18.72-6.61-2.31-6.55-13.52,4.77-6.39-10.03" fill="#010101" />
    </g>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.96 148.25" class="victory-chicky" aria-hidden="true">
    <g fill="#010101">
      <path d="M136.41 45.34c-2.2.51-7.09 4.3-10.1 6.63-7.02 5.44-14.27 11.07-20.95 8.19-6.15-2.65-6.95-10.72-7.21-13.38-.05-.53-.02-1.06.09-1.58 2.77-13.06-.3-23.62-8.64-29.73-8.72-6.4-21.74-6.95-31.66-1.35-9.63 5.44-14.3 15.44-13.16 28.17.01.14.02.28.02.43.09 12.3-10.77 14.16-14.85 14.86-.64.11-1.5.26-1.82.36-.43.19-.89.32-1.36.39-5.06.72-10.22-1.22-14.38-2.78-.48-.18-1.05-.39-1.61-.6.11.47.25 1.01.43 1.63 3.42 11.93 13.69 13.85 18.07 14.67 1.86.35 4.17.78 5.39 3.24.43.87.61 1.85.51 2.82-2.71 26.77 11.84 39.09 18.23 43.15 11.23 7.13 24.79 7.62 35.38 1.27 7.74-4.64 20.36-17.09 18-48.37-.21-2.85 1.92-5.33 4.76-5.54 1.19-.09 2.31.23 3.23.84 1.05.24 2.03.8 2.78 1.68 1.21 1.41 2.31 1.96 4.67.84 7.22-3.43 15.34-17.96 14.32-25.44-.06-.16-.12-.29-.17-.39Zm-74.57-4.06a5.17 5.17 0 0 1-5.17-5.17v-3.45c0-2.85 2.31-5.17 5.17-5.17s5.17 2.31 5.17 5.17v3.45a5.17 5.17 0 0 1-5.17 5.17Zm15.51 12.06c0 2.85-2.31 5.17-5.17 5.17s-5.17-2.31-5.17-5.17v-2.3c0-2.85 2.31-5.17 5.17-5.17s5.17 2.31 5.17 5.17v2.3Zm11.49-17.23c0 2.85-2.31 5.17-5.17 5.17s-5.17-2.31-5.17-5.17v-3.45c0-2.85 2.31-5.17 5.17-5.17s5.17 2.31 5.17 5.17v3.45Z" />
      <path d="M146.52 42.88c-1.61-4.97-4.59-6.83-6.82-7.51-6.32-1.95-12.84 3.1-19.73 8.44-2.92 2.27-8.22 6.37-10.43 6.77-.25-.47-.72-1.61-1.03-4.05 3.28-16.66-1.36-30.98-12.81-39.38C83.81-1.57 66.19-2.4 52.85 5.13c-13.12 7.41-19.82 21.2-18.39 37.86-.02 2.66-.84 3.47-6.26 4.4-1.18.2-2.31.4-3.36.74-2.43.12-5.96-1.19-8.82-2.27-4.81-1.81-9.78-3.67-13.55-.2-3.59 3.31-2.62 8.82-1.2 13.76 4.45 15.49 16.66 19.87 23.31 21.41-.76 20.63 7.75 38.48 23.29 48.35 1.75 1.11 3.55 2.08 5.39 2.94l-.33-.7 8.19-1.36 2.65 5.55c2.91.59 5.85.91 8.78.91 3.12 0 6.21-.36 9.24-1.03l2.59-5.43 8.19 1.36-.02.04c.53-.28 1.05-.56 1.57-.87 8.92-5.35 23-18.56 23.31-48.75 2.91.61 6.07.18 9.26-1.33 11.48-5.46 22.14-25.14 20-36.96-.04-.23-.1-.45-.17-.67ZM28.22 57.9s-.02 0-.03.01c.01 0 .02 0 .03-.01Zm94.03 13.28c-2.36 1.12-3.46.57-4.67-.84a5.134 5.134 0 0 0-2.78-1.68c-.92-.61-2.04-.93-3.23-.84-2.85.21-4.98 2.7-4.76 5.54 2.36 31.28-10.27 43.73-18 48.37-10.59 6.35-24.15 5.86-35.38-1.27-6.38-4.06-20.94-16.38-18.23-43.15.1-.97-.08-1.95-.51-2.82-1.22-2.46-3.54-2.89-5.39-3.24-4.38-.82-14.65-2.74-18.07-14.67-.18-.61-.32-1.15-.43-1.63.57.2 1.13.42 1.61.6 4.15 1.56 9.32 3.5 14.38 2.78.47-.07.92-.2 1.36-.39.32-.1 1.18-.25 1.82-.36 4.09-.7 14.94-2.56 14.85-14.86 0-.14 0-.28-.02-.43-1.15-12.73 3.53-22.73 13.16-28.17 9.92-5.6 22.94-5.05 31.66 1.35 8.34 6.11 11.4 16.67 8.64 29.73-.11.52-.14 1.05-.09 1.58.26 2.65 1.06 10.73 7.21 13.38 6.67 2.87 13.93-2.76 20.95-8.19 3.01-2.33 7.9-6.13 10.1-6.63.05.1.11.23.17.39 1.02 7.47-7.11 22.01-14.32 25.44Z" />
      <path d="M75.69 148.25h26.27v-7.98H88.34l4.2-8.81c-3.42 1.85-7.04 3.2-10.76 4.02l-6.09 12.77Z" />
      <path d="m84.37 130.06-2.59 5.43c3.73-.83 7.34-2.17 10.76-4.02l.02-.04-8.19-1.36ZM57.15 140.28H43.53v7.98H69.8l-6.03-12.64c-3.57-.72-7.09-1.88-10.51-3.49l3.89 8.15Z" />
      <path d="m52.93 131.43.33.7c3.41 1.6 6.94 2.76 10.51 3.49l-2.65-5.55-8.19 1.36Z" />
    </g>
    <path fill="#f3bd19" d="M135.84 45.38c-2.2.51-7.09 4.3-10.1 6.63-7.02 5.44-14.27 11.07-20.95 8.19-6.15-2.65-6.95-10.72-7.21-13.38-.05-.53-.02-1.06.09-1.58 2.77-13.06-.3-23.62-8.64-29.73-8.72-6.4-21.74-6.95-31.66-1.35-9.63 5.44-14.3 15.44-13.16 28.17.01.14.02.28.02.43.09 12.3-10.77 14.16-14.85 14.86-.64.11-1.5.26-1.82.36-.43.19-.89.32-1.36.39-5.06.72-10.22-1.22-14.38-2.78-.48-.18-1.05-.39-1.61-.6.11.47.25 1.01.43 1.63 3.42 11.93 13.69 13.85 18.07 14.67 1.86.35 4.17.78 5.39 3.24.43.87.61 1.85.51 2.82-2.71 26.77 11.84 39.09 18.23 43.15 11.23 7.13 24.79 7.62 35.38 1.27 7.74-4.64 20.36-17.09 18-48.37-.21-2.85 1.92-5.33 4.76-5.54 1.19-.09 2.31.23 3.23.84 1.05.24 2.03.8 2.78 1.68 1.21 1.41 2.31 1.96 4.67.84 7.22-3.43 15.34-17.96 14.32-25.44-.06-.16-.12-.29-.17-.39Z" />
    <path fill="#010101" d="M66.43 30.95c0-2.85-2.31-5.17-5.17-5.17s-5.17 2.31-5.17 5.17v3.45c0 2.85 2.31 5.17 5.17 5.17s5.17-2.31 5.17-5.17v-3.45ZM83.09 25.78a5.17 5.17 0 0 0-5.17 5.17v3.45c0 2.85 2.31 5.17 5.17 5.17s5.17-2.31 5.17-5.17v-3.45a5.17 5.17 0 0 0-5.17-5.17ZM66.43 49.04l5.74 6.7 4.77-6.7H66.43z" />
  </svg>
</section>
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

.chicky-in-egg {
  display: none;
}

.chicky-run-container {
  position: fixed;
  width: 100%;
  height: 90px;
  bottom: 0;
  background: #EDF2F4;
}

.chicky-walk {
  display: block;
  height: 80px;
  position: relative;
  top: 10px;
  margin-left: -80px;
  @supports (animation-timeline: view()) {
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-name: moveChicky;
    animation-timeline: scroll(root);
  }
}
.leg-left {
  transform-origin: top center;
  animation-duration: 1s;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-name: moveLegLeft;
  animation-timeline: scroll(root);
}

.leg-right {
  transform-origin: top center;
  animation-duration: 1s;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-name: moveLegRight;
  animation-timeline: scroll(root);
}

.eggshell {
  display: none;
  @supports (scroll-timeline: works) {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    display: block;
    height: 50px;
    animation-duration: 1s;
    animation-direction: normal;
    animation-name: eggShell;
    animation-timeline: scroll(root);
    z-index: 10;
  }
}
.chick-in-shell {
  position: fixed;
  left: 5px;
  bottom: 0;
  display: block;
  height: 85px;
  z-index: 10;
  animation-duration: 1s;
  animation-direction: normal;
  animation-name: shellChicky;
  animation-timeline: scroll(root);
}
.victory-chicky {
  position: fixed;
  right: 0;
  bottom: 0;
  display: block;
  height: 80px;
  opacity: 0;
  animation-duration: 1s;
  animation-direction: normal;
  animation-name: victoryChicky;
  animation-timeline: scroll(root);
}

.chicky-eye {
  transform-origin: center;
  animation: blink 8s infinite;
  @media (prefers-reduced-motion) {
    animation: none;
  }
}

@keyframes moveChicky {
  0%,
  2% {
    opacity: 0;
    transform: translateX(80px);
  }
  3% {
    opacity: 1;
    transform: translateX(80px);
  }
  92% {
    opacity: 1;
    transform: translateX(100vw);
  }
  93%,
  100% {
    opacity: 0;
    transform: translateX(100vw);
  }
}

@keyframes shellChicky {
  0%,
  2% {
    opacity: 1;
  }
  3%,
  100% {
    opacity: 0;
  }
}

@keyframes eggShell {
  0%,
  2% {
    opacity: 0;
  }
  3%,
  100% {
    opacity: 1;
  }
  8%,
  100% {
    transform: translateY(100%);
    opacity: 1;
  }
}

@keyframes victoryChicky {
  0%,
  93% {
    opacity: 0;
  }
  94%,
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0%,
  7.5%,
  12.5%,
  100% {
    opacity: 1;
  }
  5%,
  10% {
    opacity: 0.2;
  }
}

@keyframes moveLegRight {
  0%,
  10%,
  20%,
  30%,
  40%,
  50%,
  60%,
  70%,
  80%,
  90%,
  100% {
    transform: translate(0) rotate(0);
  }
  2.5%,
  12.5%,
  22.5%,
  32.5%,
  42.5%,
  52.5%,
  62.5%,
  72.5%,
  82.5%,
  92.5% {
    transform: translate(-4px, 2px) rotate(0);
  }
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    transform: translate(-15px, 5px) rotate(4deg);
  }
  7.5%,
  17.5%,
  27.5%,
  37.5%,
  47.5%,
  57.5%,
  67.5%,
  77.5%,
  87.5%,
  97.5% {
    transform: translate(-4px, 2px) rotate(0);
  }
}

@keyframes moveLegLeft {
  0%,
  10%,
  20%,
  30%,
  40%,
  50%,
  60%,
  70%,
  80%,
  90%,
  100% {
    transform: rotate(0);
  }
  2.5%,
  12.5%,
  22.5%,
  32.5%,
  42.5%,
  52.5%,
  62.5%,
  72.5%,
  82.5%,
  92.5% {
    transform: rotate(5deg);
  }
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85%,
  95% {
    transform: rotate(0);
  }
  7.5%,
  17.5%,
  27.5%,
  37.5%,
  47.5%,
  57.5%,
  67.5%,
  77.5%,
  87.5%,
  97.5% {
    transform: rotate(-5deg);
  }
}

@media (prefers-reduced-motion) {
  .chicky-run-container * {
    animation: none;
  }
}

/* general styling */
body {
  margin: 0;
  padding: 0;
  height: 2500px;
  font-family: "Poppins", sans-serif;
  background: #8D99AE;
}

main {
  text-align: center;
  padding-top: 50px;
  font-size: 2rem;
}

.intro {
  display: inline-block;
  padding: 30px;
  border-radius: 10px;
  background: #EDF2F4;
}
Run Pen

External CSS

  1. https://codepen.io/utilitybend/pen/oNabmYR.css

External JavaScript

  1. https://codepen.io/utilitybend/pen/oNabmYR.js