<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.