<img src="https://images.unsplash.com/photo-1503249023995-51b0f3778ccf?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTA5MjM4ODh8&ixlib=rb-4.0.3&q=85" alt="person in hoodie holding a red flare">

<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 --move-x {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --move-y {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

@property --scale {
  syntax: "<percentage>";
  initial-value: 20%;
  inherits: false;
}

img {
  position: fixed;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  transform: translate(-50%, -50%);
  height: auto;
  max-width: 50vmin;
  aspect-ratio: 1;
  object-fit: cover;
  clip-path: circle(var(--scale) at var(--move-x) var(--move-y));
  animation: rotateOrb linear both;
  animation-timeline: scroll();
  border: 5px solid deeppink;
}

/* Give the image this class, for an alternate animation */
.square-in {
  clip-path: inset(var(--move-y) var(--move-x) 0 0);
  animation-name: squareIn;
}

@keyframes rotateOrb {
  0% {
    --move-x: 0%;
    --move-y: 0%;
  }
  25% {
    --move-x: 100%;
    --move-y: 0%;
  }
  50% {
    --move-x: 100%;
    --move-y: 100%;
  }
  75% {
    --move-x: 0%;
    --move-y: 100%;
    --scale: 60%;
  }
  100% {
    --move-x: 0%;
    --move-y: 0%;
    --scale: 150%;
  }
}

@keyframes squareIn {
  from {
    --move-x: 100%;
    --move-y: 100%;
  }
  to {
    --move-x: 0%;
    --move-y: 0%;
  }
}

body {
  margin: 0;
  height: 400vh;
}

/* 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.