<div class="intro">
  <div>Scroll down</div>
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" />
  </svg>
</div>
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTEyNjg5NDZ8&ixlib=rb-4.0.3&q=85">

<div class="warning">
  This demo uses scroll driven animations in CSS, it seems your current browser does not support this.<br />
  However, if you are using one of the evergreen browsers, you should notice this page still works even without them.
</div>
@property --clip-1-a {
  syntax: "<percentage>";
  initial-value: 61%;
  inherits: false;
}

@property --clip-1-b {
  syntax: "<percentage>";
  initial-value: 35%;
  inherits: false;
}

@property --clip-2-a {
  syntax: "<percentage>";
  initial-value: 98%;
  inherits: false;
}

@property --clip-2-b {
  syntax: "<percentage>";
  initial-value: 35%;
  inherits: false;
}

@property --clip-3-a {
  syntax: "<percentage>";
  initial-value: 68%;
  inherits: false;
}

@property --clip-3-b {
  syntax: "<percentage>";
  initial-value: 57%;
  inherits: false;
}

@property --clip-4-a {
  syntax: "<percentage>";
  initial-value: 79%;
  inherits: false;
}

@property --clip-4-b {
  syntax: "<percentage>";
  initial-value: 91%;
  inherits: false;
}

@property --clip-5-a {
  syntax: "<percentage>";
  initial-value: 50%;
  inherits: false;
}

@property --clip-5-b {
  syntax: "<percentage>";
  initial-value: 70%;
  inherits: false;
}

@property --clip-6-a {
  syntax: "<percentage>";
  initial-value: 21%;
  inherits: false;
}

@property --clip-6-b {
  syntax: "<percentage>";
  initial-value: 91%;
  inherits: false;
}

@property --clip-7-a {
  syntax: "<percentage>";
  initial-value: 32%;
  inherits: false;
}

@property --clip-7-b {
  syntax: "<percentage>";
  initial-value: 57%;
  inherits: false;
}

@property --clip-8-a {
  syntax: "<percentage>";
  initial-value: 2%;
  inherits: false;
}

@property --clip-8-b {
  syntax: "<percentage>";
  initial-value: 35%;
  inherits: false;
}

@property --clip-9-a {
  syntax: "<percentage>";
  initial-value: 39%;
  inherits: false;
}

@property --clip-9-b {
  syntax: "<percentage>";
  initial-value: 35%;
  inherits: false;
}

img {
  display: block;
  width: 50%;
  max-width: 50%;
  object-fit: cover;
  object-position: top;
  margin-block-end: 100vh;
  margin-inline: auto;
  aspect-ratio: 1;

  animation: updateStar linear both;
  animation-timeline: view(block);
  animation-range: cover 20% contain 60%;
  clip-path: polygon(
    50% 0%,
    var(--clip-1-a) var(--clip-1-b),
    var(--clip-2-a) var(--clip-2-b),
    var(--clip-3-a) var(--clip-3-b),
    var(--clip-4-a) var(--clip-4-b),
    var(--clip-5-a) var(--clip-5-b),
    var(--clip-6-a) var(--clip-6-b),
    var(--clip-7-a) var(--clip-7-b),
    var(--clip-8-a) var(--clip-8-b),
    var(--clip-9-a) var(--clip-9-b)
  );
}

@keyframes updateStar {
  0%,
  50% {
    --clip-1-a: 100%;
    --clip-1-b: 0%;
    --clip-2-a: 100%;
    --clip-3-a: 100%;
    --clip-4-a: 100%;
    --clip-4-b: 100%;
    --clip-5-a: 50%;
    --clip-5-b: 100%;
    --clip-6-a: 0%;
    --clip-6-b: 100%;
    --clip-6-a: 0%;
    --clip-6-b: 100%;
    --clip-7-a: 0%;
    --clip-8-a: 0%;
    --clip-9-a: 0%;
    --clip-9-b: 0%;
  }
}

.intro {
  font-size: 4rem;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  place-content: center;
  place-items: center;
  & svg {
    width: 5vw;
    height: 5vw;
    animation: scrollIndicator 4s ease-out infinite;
  }
}

@keyframes scrollIndicator {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* Support warning and motion preferences */

.warning {
  display: none;
}

@supports not (animation-timeline: view(block)) {
  * {
    animation: none;
    clip: none;
  }
  .warning {
    position: fixed;
    top: 1rem;
    left: 1rem;
    padding: 1rem;
    border: 5px solid deeppink;
    background: white;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
  }
}

@media (prefers-reduced-motion) {
  * {
    animation: none;
    clip: none;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.