Carmen Ansio
Design Engineer at LottieFiles
Animaciones CSS
con Scroll
MiduConf
LottieFiles
Design Engineer
Recordad
Un gran poder conlleva una gran responsabilidad
Respeta las preferencias de usuario
Es fácil, sólo necesitas una mediaquery
@media (prefers-reduced-motion: no-preference) {
/* tus animaciones chingonas */
}Necesitamos saber
Animación y Scrollytelling
¿Qué es una animación?
Proceso que crea imágenes en movimiento
@keyframes grow {
0% {
transform: scale(1);
}
100% {
transform: scale(2);
}
}
¿Qué ha pasado entre medias?
¿Qué es una animación?
Proceso que crea imágenes en movimiento
Guía los usuarios, proporciona feedback, mejora la UX
¿Qué es una animación?
¿Qué es scrollytelling?
Transforma un relato largo en una experiencia interactiva
¿Qué son las animaciones basadas en scroll?
Normalmente hacemos referencia a dos tipos diferentes...
1. Una animación que sucede mientras haces scroll.
2. Una animación que se produce cuando un elemento entra, sale o se desplaza por una zona visible.
Scrollport
¿Podemos conseguir este efecto sólo con CSS?
.fill {
animation: progress linear forwards;
animation-timeline: scroll();
}
@keyframes progress {
from {
stroke-dasharray: 0px 1px;
}
to {
stroke-dasharray: 1px 1px;
}
}La forma tradicional
con vanilla JavaScript
Porque no necesitas JS
el "main thread" de modo visual
¿Por que usar CSS
para animaciones con Scroll?
Porque podemos.
La API scroll-driven Animations nos permite crear animaciones suaves controladas por el scroll del usuario.
Estas animaciones se reproducen fuera del main thread, consiguiendo rendimiento fluido con un par de líneas de código.
Linkemos una animación existente
al scroll de la página
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();
}
Efectos Scroll
Creativos
Efectos Scroll
Galerias
Efectos Scroll
Texto
Efectos Scroll
Carrousels
Efectos Scroll
Carrousels Vertical
Wrap up
Efectos con Scroll
¿Te preocupa tener que aprender a animar de forma diferente?
animation-timeline: scroll();
animation-timeline: view();Cuando una animación utiliza una de estas dos líneas de tiempo, sigue esa línea de tiempo y no la habitual basada en el tiempo.
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;
}La spec scroll-driven animations
Web Animations API - CSS Animation API
Retro time
timeline-scope: --question-block, --world, --mario;¿Tenéis miedo de los nuevos timelines?
Outrun
El futuro pinta bien para CSS
@bramus@argyleink@unaGracias
slides.com/carmenansio
Miduconf - Scroll driven animations
By Carmen Ansio
Miduconf - Scroll driven animations
Presentation slides for 'Scroll-Enhanced Experiences' at CSS Day 2024
