El poder del Scroll

@carmenansio

Historias interactivas con CSS

@carmenansio
@carmenansio
https://www.youtube.com/watch?v=-pzckbNyqfc

@carmenansio
@carmenansio

Making things move

LottieFiles

@carmenansio
@carmenansio
@carmenansio
@carmenansio
https://codepen.io/carmenansio​

Sed responsables

@carmenansio

con vuestras animaciones

@carmenansio
@media (prefers-reduced-motion: no-preference) {
  /* your fancy motion */
}
@carmenansio

Comencemos por

@carmenansio

el principio

Las opciones de siempre

@carmenansio

para animar en la web

@carmenansio
transform
transition
animation

Transformaciones CSS

@carmenansio

modificar forma, tamaño o posición

Transiciones CSS

@carmenansio

cambios de un estado a otro

@carmenansio

Animaciones CSS

@carmenansio

secuencias de cambios de estilos con @keyframes

@carmenansio
@carmenansio

La interpolación

@carmenansio

¿Qué ocurre con el navegador?

@carmenansio

Pero...por donde

@carmenansio

¿Podemos comenzar?

@carmenansio

¿Demasiado básico?

@carmenansio
@carmenansio
@carmenansio

Todas las propiedades

@carmenansio

de CSS... ¿se pueden animar?

@carmenansio

No podemos hacer

@carmenansio

transiciones directas en fondos degradados

Pero sí podemos

@carmenansio

desplazar y escalar los fondos

@carmenansio
@carmenansio

Demo Animación CSS

@carmenansio

Cubo 3D

@carmenansio
<div class="scene">
	<div class="cube">
		<div class="face front"></div>
		<div class="face back"></div>
		<div class="face right"></div>
		<div class="face left"></div>
		<div class="face top"></div>
		<div class="face bottom"></div>
	</div>
</div>
@carmenansio
.scene {
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
	animation: rotate 20s infinite linear;
}
@carmenansio
.cube {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
}
@carmenansio
.face {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0.8;
	border: 2px solid rgba(255, 255, 255, 0.5);
}
@carmenansio
.front {
	transform: rotateY(0deg) translateZ(100px);
	background-image: url("https://picsum.photos/200/200?random=1");
}
@carmenansio
@keyframes rotate {
	0% {
		transform: rotateX(0) rotateY(0);
	}
	100% {
		transform: rotateX(360deg) rotateY(360deg);
	}
}
@carmenansio

Las nuevas opciones

@carmenansio

para animar en la web

CSS Scroll Snap Module

@carmenansio
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap

Intersection Observer

@carmenansio

La scroll-driven animations spec

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

Web Animations API - CSS Animation API

Scroll-driven animations

@carmenansio

Animaciones basadas en el scroll del usuario

API ScrollTimeline

@carmenansio

Conjunto de reglas/protocolos que permiten que las aplicaciones de software se comuniquen entre sí para intercambiar datos

@carmenansio
animation-timeline: view();
animation-timeline: scroll();

Cuando una animación utiliza una de estas dos nuevas líneas de tiempo, se basa en el scroll y no la habitual basada en la duración.

@carmenansio

ScrollTimeline Scroll

@carmenansio

animation-timeline: scroll();

@carmenansio
:root {
	animation: scroll 1s linear;
	animation-timeline: scroll();
}

body {
	min-height: 300vh;
}
@carmenansio
@carmenansio

Modern CSS

Spoiler alert

@property --s {
	syntax: "<integer>";
	inherits: true;
	initial-value: 0;
}

@keyframes scroll {
	to {
		--s: 100;
	}
}
@carmenansio
body::before {
	content: "Scroll Progress\A "counter(s) "%";
	counter-reset: s var(--s);
	font-size: 50px;
	font-family: system-ui, sans-serif;
	font-weight: 900;
	white-space: pre;
	text-align: center;
	position: fixed;
	inset: 0;
	width: fit-content;
	height: fit-content;
	margin: auto;
}
@carmenansio

Recordáis el cubo 3D

@carmenansio

¿Podemos linkar la animación al scroll?

@carmenansio
<div class="scroll-container">
	<div class="section">Sección 1</div>
	<div class="section">Sección 2</div>
	<div class="section">Sección 3</div>
	<div class="section">Sección 4</div>
</div>
@carmenansio
.scroll-container {
	height: 400vh;
	display: grid;
	grid-template-rows: 100vh 100vh 100vh 100vh;
}
@carmenansio
.cube {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	animation: rotate linear;
	animation-timeline: scroll();
	animation-range: 0 400vh;
}
@carmenansio
animation-timeline: scroll();
@carmenansio
@carmenansio

ScrollTimeline View

@carmenansio

animation-timeline: view();

@carmenansio
<section class="wrap">
	<div class="move">
		<figure><img src="https://picsum.photos/400/400?random=1" /></figure>
      	<figure><img src="https://picsum.photos/400/400?random=2" /></figure>
        ...
	</div>
</section>
@carmenansio
img {
	width: var(--d);
	aspect-ratio: 1;
	-webkit-box-reflect: below 0.5em linear-gradient(#0000, #0004);
	animation: ry 1s cubic-bezier(0.32, 0, 0.68, 0) both, tz 1s ease-in both;
	animation-timeline: view(inline);
}
@carmenansio
@keyframes ry {
	0% {
		rotate: y -90deg;
	}
	50% {
		rotate: y 0deg;
		animation-timing-function: cubic-bezier(0.32, 1, 0.68, 1);
	}
	100% {
		rotate: y 90deg;
	}
}
@carmenansio
@keyframes tz {
	0% {
		translate: -50% 0;
	}
	50% {
		translate: 0 0 calc(1.5 * var(--d));
		animation-timing-function: ease-out;
	}
	100% {
		translate: 50% 0;
	}
}
@carmenansio

Hablemos

@carmenansio

del soporte

@carmenansio

115

115

@carmenansio
@supports (animation-timeline: view()) {
  /* your fancy scroll motion */
}
@carmenansio
@supports (animation-timeline: view()) {
  @keyframes fade-in-on-enter--fade-out-on-exit {
    entry 0% {
      opacity: 0;
      transform: translateY(150vh) rotate(35deg);
    }
    entry 100% {
      opacity: 1;
      transform: translateY(0) rotate(0deg);
    }
    exit 0% {
      opacity: 1;
      transform: translateY(0) rotate(0deg);
    }
    exit 100% {
      opacity: 0;
      transform: translateY(-150vh) rotate(-35deg);
    }
  }

  .gallery > ul > li {
    animation: linear fade-in-on-enter--fade-out-on-exit;
    animation-timeline: view();
  }
}
@carmenansio

Mezclando técnicas

@carmenansio

ScrollTimeline View + Scroll Snap

@carmenansio
@carmenansio

Recursos

@carmenansio

esenciales

https://www.scroll-driven-animations.style/
@carmenansio
@carmenansio
https://chromewebstore.google.com/detail/scroll-driven-animations

Gracias

@carmenansio

slides.com/carmenansio

WTM Zaragoza 2024

By Carmen Ansio

WTM Zaragoza 2024

  • 68

More from Carmen Ansio