Animaciones CSS

con Scroll

@carmenansio

MiduConf

@carmenansio

LottieFiles

Design Engineer

@carmenansio
@carmenansio

Recordad

@carmenansio

Un gran poder conlleva una gran responsabilidad

@carmenansio

Respeta las preferencias de usuario

@carmenansio
@carmenansio

Es fácil, sólo necesitas una mediaquery

@carmenansio
@media (prefers-reduced-motion: no-preference) {
  /* tus animaciones chingonas */
}
@carmenansio

Necesitamos saber

@carmenansio

Animación y Scrollytelling

¿Qué es una animación?

@carmenansio

Proceso que crea imágenes en movimiento

@carmenansio
@carmenansio
@keyframes grow {
  0% {
    transform: scale(1);
  }
  
  100% {
    transform: scale(2);
  }
}

¿Qué ha pasado entre medias?

@carmenansio

¿Qué es una animación?

@carmenansio

Proceso que crea imágenes en movimiento

@carmenansio

Guía los usuarios, proporciona feedback, mejora la UX

¿Qué es una animación?

¿Qué es scrollytelling?

@carmenansio

Transforma un relato largo en una experiencia interactiva

@carmenansio
https://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek

@carmenansio

¿Qué son las animaciones basadas en scroll?

@carmenansio

Normalmente hacemos referencia a dos tipos diferentes...

@carmenansio

1. Una animación que sucede mientras haces scroll.

@carmenansio

2. Una animación que se produce cuando un elemento entra, sale o se desplaza por una zona visible.

@carmenansio

Scrollport

@carmenansio
@carmenansio
@carmenansio
@carmenansio

¿Podemos conseguir este efecto sólo con CSS?

@carmenansio
@carmenansio
.fill {
  animation: progress linear forwards;
  animation-timeline: scroll();
}

@keyframes progress {
  from {
    stroke-dasharray: 0px 1px;
  }
  to {
    stroke-dasharray: 1px 1px;
  }
}
@carmenansio

La forma tradicional

@carmenansio

con vanilla JavaScript

@carmenansio

Porque no necesitas JS

@carmenansio

el "main thread" de modo visual

@carmenansio
@carmenansio

¿Por que usar CSS

para animaciones con Scroll?

@carmenansio

Porque podemos.

@carmenansio
@carmenansio

La API scroll-driven Animations nos permite crear animaciones suaves controladas por el scroll del usuario. 

@carmenansio

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

@carmenansio

al scroll de la página

@carmenansio
img {
	animation: 2s infinite alternate zoomin;
}
@keyframes zoomin {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
@carmenansio
@carmenansio
@carmenansio
@keyframes zoomin {
	from {
		margin-left: 100%;
		width: 0%;
	}

	to {
		margin-left: 0%;
		width: 50%;
	}
}
@carmenansio
img {
	animation: zoomin 2s infinite alternate;
}
@carmenansio
img {
	animation: zoomin linear both;
	animation-timeline: scroll();
}
@carmenansio
@carmenansio
@carmenansio

Efectos Scroll

Creativos

@carmenansio
@carmenansio
@carmenansio
@carmenansio
@carmenansio

Efectos Scroll

Galerias

@carmenansio
@carmenansio
@carmenansio

Efectos Scroll

Texto

@carmenansio
@carmenansio
@carmenansio
@carmenansio

Efectos Scroll

Carrousels

@carmenansio
@carmenansio
@carmenansio
@carmenansio
@carmenansio

Efectos Scroll

Carrousels Vertical

@carmenansio
@carmenansio
@carmenansio

Wrap up

Efectos con Scroll

@carmenansio

¿Te preocupa tener que aprender a animar de forma diferente?

@carmenansio
@carmenansio
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.

@carmenansio
@carmenansio
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

@carmenansio
https://drafts.csswg.org/scroll-animations-1/

Web Animations API - CSS Animation API

https://www.scroll-driven-animations.style/
@carmenansio
@carmenansio
https://webstatus.dev/features/scroll-driven-animations?q=scroll+driven
@carmenansio
https://chromewebstore.google.com/detail/scroll-driven-animations

@carmenansio

Scroll -Driven animations con ScrollTimeline y ViewTimeline

@carmenansio

115

115

115

18

Retro time

@carmenansio
@carmenansio
https://www.spriters-resource.com/

@carmenansio
timeline-scope: --question-block, --world, --mario;

¿Tenéis miedo de los nuevos timelines?

@carmenansio
@carmenansio

Outrun

@carmenansio
@carmenansio
@warkentien2
https://000699350.deployed.codepen.website/pages/home/home.html#color-1
@warkentien2
@warkentien2
https://nerdy.dev/pull-to-refresh-prototype-with-scroll-snap-and-scroll-driven-animation
@warkentien2
@warkentien2
@carmenansio
@warkentien2

El futuro pinta bien para CSS

@carmenansio
@carmenansio
@bramus
@argyleink
@una

Gracias

@carmenansio

slides.com/carmenansio

Miduconf - Scroll driven animations

By Carmen Ansio

Miduconf - Scroll driven animations

Presentation slides for 'Scroll-Enhanced Experiences' at CSS Day 2024

  • 1,791

More from Carmen Ansio