Scroll-enhanced experiences
Making things move
LottieFiles
Before we dive in
Respect user preferences
It's easy you only need a mediaquery
@media (prefers-reduced-motion: no-preference) {
/* your fancy motion */
}Last but not least
With great power comes great responsibility
We need to answer
Animation, Storytelling & Scrollytelling
What is animation?
A process that creates moving images
@keyframes grow {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
What happens in between?
What is animation?
A process that creates moving images
What is animation?
Guide users, provide feedback & engage UX
What is storytelling?
Make stories emotional and catchy
What is scrollytelling?
Transforms a longform story into an interactive experience
Scroll animations
It's all about human behavior
What are scroll-driven animations?
Scroll-driven animation usually refers to...
An animation that happens while you scroll.
An animation that happens when an element enters, leaves, or moves through a visible area.
Scrollport
Can we achieve this effect with only CSS?
.fill {
animation: progress linear forwards;
animation-timeline: scroll();
}
@keyframes progress {
from {
stroke-dasharray: 0px 1px;
}
to {
stroke-dasharray: 1px 1px;
}
}Universal Language
Motion == Emotion
Ye Olde Way
With vanilla JavaScript
Why you not need JS
the main thread in a visual way
Why use CSS
for Scroll Animations?
Because now
we can
The scroll-driven Animations API lets you create smooth animations that are controlled by scrolling.
These animations run off the main thread, achieving a smooth performance with just a few extra lines of code.
Attaching an existing CSS animation
to a scroller
img {
animation: 2s infinite alternate zoomin;
}@keyframes zoomin {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}@keyframes zoomin {
from {
margin-left: 100%;
width: 0%;
}
to {
margin-left: 0%;
width: 50%;
}
}img {
animation: zoomin 2s infinite alternate;
}img {
animation: zoomin linear both;
animation-timeline: scroll();
}
The scroll-driven animations specification
Web Animations API - CSS Animation API
Worried about learning new stuff?
animation-timeline: scroll();
animation-timeline: view();When an animation uses one of these two timelines, it follows that timeline and not the usual time-based one.
Scroll Progress Timeline
View Progress Timeline
Let's create a fancy progress bar
Let's create a happy progress bar
Performance. CSS animations are smoother, less taxing on your browser's main thread, and they render faster.
animation-timeline: scroll(root);.link {
animation: stage both linear var(--run-count);
}img {
animation: zelda-motion both steps(calc(var(--frames) - 1)) var(--run-count);
}How the Scroll Animation Works
@keyframes stage {
to {
translate: calc(-100% + 40vmin) 0;
}
}@keyframes zelda-motion {
100% {
object-position: 100% 0;
}
}@supports (animation-timeline: scroll()) {
/* your cool scrolly motion */
}Codrops
.grid {
display: grid;
gap: 0.75rem;
inline-size: min(90vw, 80rem);
margin-inline: auto;
}
.grid__item {
aspect-ratio: 7/10;
transform: skewX(10deg);
animation: skew linear both;
view-timeline: --skew;
animation-range: entry exit 50%;
animation-timeline: --skew;
filter: brightness(0);
overflow: hidden;
}.grid__item img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
animation: scale linear both;
animation-timeline: --skew;
animation-range: inherit;
}.grid__row:nth-of-type(odd) .grid__item {
transform: skewX(-10deg);
}@keyframes skew {
to {
transform: skewX(0deg);
filter: brightness(1);
}
}
@supports (animation-timeline: view()) {
.warning {
display: none;
}
}Cool effects that you can achieve with Scroll-driven animations
.content {
animation: appear linear;
animation-range: entry 0% entry 100%;
animation-timeline: view();
}img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
// timeline
view-timeline-name: --image;
view-timeline-axis: block;
// animation
animation-timeline: --image;
animation-name: scroll;
// range
animation-range: entry 25% cover 30%;
animation-fill-mode: both;
}
It's all about images
:root {
--bg: hsl(0 0% 2%);
--color: hsl(0 0% 100% / 0.1);
--underline-width: 1lh;
--underline-block-width: 200vmax;
--underline-color: hsl(0 0% 50% / 0.05);
--underline-transition: 5s;
--finish: hsl(0 0% 100%);
--accent: hsl(0 0% 100%);
--fill: hsl(0 0% 50%);
}
section {
margin: 100vh 0;
height: 100vh;
width: 100vw;
view-timeline-name: --section;
}p {
width: 50vw;
resize: both;
max-width: 100vw;
overflow: hidden;
position: fixed;
padding: 10vmin;
top: 50%;
left: 50%;
translate: -50% -50%;
animation: fill both linear;
animation-timeline: --section;
animation-range: cover;
margin: 0;
}@property --progress {
initial-value: 0;
syntax: "<number>";
inherits: true;
}But CSS is not programming
"Your JS dev friend"
p > span {
outline-color: hsl(10 80% 50%);
outline-offset: 1ch;
font-size: clamp(3rem, 4vw + 1rem, 10rem);
color: var(--color);
text-decoration: none;
background-image: linear-gradient(
90deg,
transparent calc(100% - 8ch),
var(--accent) calc(100% - 8ch)
),
linear-gradient(90deg, var(--fill), var(--fill)),
linear-gradient(90deg, var(--underline-color), var(--underline-color));
background-size: var(--underline-block-width) var(--underline-width),
var(--underline-block-width) var(--underline-width),
100% var(--underline-width);
background-repeat: no-repeat;
background-position-x: calc(
(var(--underline-block-width) * -1) +
(var(--progress) * var(--underline-block-width) * 1)
),
calc(
(var(--underline-block-width) * -1) +
(var(--progress) * var(--underline-block-width) * 1)
),
0;
background-position-y: 100%;
color: transparent;
-webkit-background-clip: text;
animation: color both linear;
animation-timeline: --section;
animation-range: cover 65% cover 100%;
}
@keyframes fill {
to {
--progress: 1;
}
}
@keyframes color {
to {
color: var(--finish);
}
}Retro time
timeline-scope: --question-block, --world, --mario;Affraid of the timeline
Outrun
What's next for CSS?
Bright future
@bramus@argyleink@unaThanks
Keep scrolling
