Salut đ moi c'est
Consultant web / Tech Lead front-end chez 
J'essaie de faire des interfaces qu'on a envie d'utiliser
Julien Sulpis
Devfest Nantes - 20/10/2023Ăa va ĂȘtre dense !
(mais fun)
Bloque le main thread pendant 3 secondes
Shift + B : affiche le bouton en bas Ă droite sur n'importe quelle slide
Ctrl + B (bouton visible) : bloque le main thread
Partie 1
Usage: passage dâun Ă©tat A Ă un Ă©tat B
Usage: passage dâun Ă©tat A Ă un Ă©tat B
.demo {
transition: transform 800ms ease-in-out;
&:checked {
transform: translateX(80%);
}
}
đ
đ
.icon:hover {
transform: rotate(1turn);
transition: transform 800ms;
}
@jsulpis
: Hamburger menu animation
button[aria-expanded="true"] {
path:nth-child(1) {
transform: rotate(45deg) scaleX(1.35);
}
path:nth-child(2) {
opacity: 0;
}
path:nth-child(3) {
transform: rotate(-45deg) scaleX(1.35);
}
svg {
transform: rotate(-180deg);
}
}
}Jake Sully et Neytiri sont devenus parents. L'intrigue se déroule une dizaine d'années aprÚs les événements racontés dans le long-métrage originel. Leur vie idyllique, proche de la nature, est menacée lorsque la « Resources Development Administration », dangereuse organisation non-gouvernementale, est de retour sur Pandora...
@jsulpis
: Movie card with hover effect
.synopsis {
...
transition-duration: calc(var(--transition-duration) / 2);
transition-delay: calc(var(--transition-duration) / 8);
}
.movie-card:hover .synopsis {
...
transition-duration: var(--transition-duration);
transition-delay: calc(var(--transition-duration) / 3);
}Usage: animation composĂ©e dâau moins deux Ă©tats, qui peut ĂȘtre dĂ©clenchĂ©e immĂ©diatement et qui peut ne jamais se terminer
@keyframes slide {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.card {
animation: slide 2s ease-in-out infinite alternate;
}@keyframes slide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
.card {
animation: slide 2s ease-in-out infinite alternate;
}@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(15%);
}
}
.card {
animation: fadeIn 800ms ease-out backwards;
animation-delay: calc(500ms + var(--index) * 100ms);
}Nous cherchons le meilleur itinéraire...
@Mandy
: CSS-only SVG animation
Usage: similaire aux transitions et animations CSS, mais contrĂŽlables finement en javascript
@keyframes slide {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.card {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}@keyframes slide {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.card {
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}const card = document.querySelector('.card');
card.animate(
[
{ transform: "translateX(-100%)" },
{ transform: "translateX(100%)" }
],
{
duration: 2000,
easing: "ease-in-out",
iterations: Infinity,
direction: "alternate",
}
);const animation = card.animate(keyframes, options);
const animation = card.animate(keyframes, options);
animation.pause();
...
animation.play();
animation.cancel();
animation.reverse();
const animation = card.animate(keyframes, options);
animation.pause();
...
animation.play();
animation.cancel();
animation.reverse();
const seek = (timestamp) => animation.currentTime = timestamp;
Tentez-vous votre chance ?
C'est gagné !
Usage: toute action Ă effectuer avant chaque frame rendue par le navigateur
window.requestAnimationFrame(() => {
/* faire des trucs avant le rendu de la PROCHAINE frame */
});function animate(() => {
/* faire des trucs avant le rendu de CHAQUE frame */
requestAnimationFrame(animate);
})
animate();function loop(callback) {
(function animate() {
callback();
requestAnimationFrame(animate);
})();
}
loop(() => {
// c'est plus clair !
})loop(() => {
performance.mark("next");
const measure = performance.measure("duration", "current", "next");
performance.mark("current");
const frameDuration = measure.duration;
});FPS
0.0ms par frame@jsulpis
: FPS meter
Si tu peux le modifier en JavaScript, tu peux l'animer.
loop(() => {
// interpoler "progress"
...
element.textContent = progress;
});loop(() => {
// interpoler "progress"
...
element.setAttribute('value', progress);
});
Partie 2
<Transition />
<TransitionGroup />
<Transition />
<Transition>
<p v-if="show">Bonjour</p>
</Transition><Transition />
<TransitionGroup />
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item">
{{ item }}
</li>
</TransitionGroup><TransitionGroup />
import { tweened, spring } from 'svelte/motion';
import { fade, fly, draw, crossfade, ... } from 'svelte/transition';
import { flip } from 'svelte/animate';
import { elasticIn, cubicOut, sineInOut, ... } from 'svelte/easing';
import { trigger, state, style } from '@angular/animations';
@Component({
animations: [
trigger('openClose', [
state('open', style({
opacity: 1,
backgroundColor: 'yellow'
})),
...
})
export class OpenCloseComponent { ... }La solution la plus complĂšte pour React
export const MyComponent = ({ isVisible }) => (
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
)}
</AnimatePresence>
)| Transitions | FLIP | Tween | Spring | Web Animation API | requestAnimationFrame |
|---|---|---|---|---|---|
| â | â | â | â | â | â |
Taille (min + gzip) : 40.8kB
La boĂźte Ă outils pour Vue
<template>
<div
v-motion
:initial="{ opacity: 0 }"
:visible="{ opacity: 1 }"
:hovered="{ scale: 1.2 }"
:leave="{ opacity: 0 }"
/>
</template>
| Transitions | FLIP | Tween | Spring | Web Animation API | requestAnimationFrame |
|---|---|---|---|---|---|
| â | â | â | â | â | â |
Taille (min + gzip) : ~20kB
La librairie de référence
(23.5kB)
La librairie de référence
(23.5kB)
Alternative à gsap, légÚre et polyvalente
(7kB)
La librairie de référence
(23.5kB)
Alternative à gsap, légÚre et polyvalente
(7kB)
Web Animation API améliorée
(3.8kB)
Animation par keyframes
@GreenSock
: 3D Animation with GSAP
Ăchelonnement ("stagger")
Ăchelonnement ("stagger")
Scroll / Visibilité
SVG (path, morphing, drawing...)
| Librarie | Fonction "animate" | Timeline | Stagger | Scroll | Spring | WAAPI | SVG | Poids |
|---|---|---|---|---|---|---|---|---|
| GSAP | â | â | â | â | â | â | â | 23.5kB |
| Anime.js | â | â | â | â | â | â | â | 7kB |
| Motion One | â | â | đ | â | â | â | đ | 3.8kB |
Retour sur les animations SVG...
@Josh
: GreenSock SVG Bounce Animation
<dotlottie-player
autoplay
controls
loop
src="/animation.lottie"
style="width: 300px"
/>Taille (min + gzip) : 30.3kB
On respire, c'est pas fini...
Partie 3
Usage: animation complexe et/ou interactive d'un grand nombre de formes géométriques lorsque les SVGs ne suffisent plus
<canvas width="400" height="400" />const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "hsl(200deg, 100%, 50%)";
ctx.fillRect(100, 100, 200, 200);Si tu peux le modifier en JavaScript, tu peux l'animer.
loop(() => {
const time = Date.now();
...
// monstre
ctx.translate(Math.cos(time) * 30, 0);
...
// bouche
const angle = (Math.cos(time) + 1) / 3;
ctx.arc(37, 37, 13, angle, -1 * angle, false);
...
})Librairie généraliste pour le canvas 2D
Taille (min + gzip) : 85.5kB
Moteur physique 2D
Taille (min + gzip) : 24.5kB
Ăditeur et runtime pour des animations interactives multiplateformes
Taille (min + gzip) : 20.9kB
Usage: mettre des paillettes dans les yeux de vos utilisateurs
<canvas width="400" height="400" />const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");
// Geometry
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
gl.STATIC_DRAW
);
vertexBuffer.itemSize = 2;
vertexBuffer.numItems = 4;
// Shaders
const vertexShaderSource =
"attribute vec2 a_position;" +
"void main() { gl_Position = vec4 (a_position, 0,1); }";
const fragmentShaderSource =
"precision mediump float;" +
"void main() { gl_FragColor = vec4 (0.9,0,0.1,1); }";
const buildShader = function (shaderSource, typeOfShader) {
const shader = gl.createShader(typeOfShader);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
return shader;
};
const compiledVertexShader = buildShader(
vertexShaderSource,
gl.VERTEX_SHADER
);
const compiledFragmentShader = buildShader(
fragmentShaderSource,
gl.FRAGMENT_SHADER
);
// Setup GLSL program
const program = gl.createProgram();
gl.attachShader(program, compiledVertexShader);
gl.attachShader(program, compiledFragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// Draw
const positionLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(
positionLocation,
vertexBuffer.itemSize,
gl.FLOAT,
false,
0,
0
);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertexBuffer.numItems);Taille (min + gzip) : 154.28kB
// Scene
const scene = new THREE.Scene();
// Cube
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: "red" });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Camera
const camera = new THREE.PerspectiveCamera(75, 1);
camera.position.z = 1;
scene.add(camera);
// Renderer
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(400, 400);
renderer.render(scene, camera);
Si tu peux le modifier en JavaScript, tu peux l'animer.
gsap.to(
mesh.position,
{
x: 1
duration: 2,
}
);GPU
GPU
geométrie
attribute vec3 position;
uniform float time;
void main() {
gl_Position = vec4(position.x, position.y, sin(time), 1.0);
}geométrie
@jsulpis
: WebGL Displaced Sphere
geométrie
couleur
varying vec2 uv;
uniform float time;
void main() {
gl_FragColor = vec4(uv.x, uv.y, sin(time), 1.0);
}couleur
couleur
couleur
couleur
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryBorderColor': 'black',
'secondaryBorderColor': 'black',
'tertiaryBorderColor': 'gray',
'fontSize': '18px'
}
}
}%%
flowchart
subgraph native["CSS / JS"]
end
subgraph frameworks["Framework JS"]
end
subgraph libs1["Librairie Vanilla JS"]
end
subgraph libs2["Librairie du framework"]
end
subgraph canvas2D["Canvas 2D"]
end
subgraph webgl["Canvas WebGL"]
end
native --> frameworks
native --> libs1
frameworks --> libs1
frameworks --> libs2
libs1 & libs2 --> a(" ")
a --> canvas2D & webgl
Partie 4
Tant de possibilités !
Tu peux faire 1 animation sur une page, pas 15...
Tu peux faire 2 animations sur une page, pas 15...
Tu peux faire 3 animations Ă la limite, mais pas 15...
...
@media (prefers-reduced-motion: no-preference) {
/* mouvement important */
}if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
animate();
}@jsulpis
| Technique | Ătapes calculĂ©es | Performance | Polyvalence | DifficultĂ© |
|---|---|---|---|---|
| Transition CSS |  |
5/5 | 4/5 | facile đ |
| Animation CSS | |
5/5 | 3/5 | facile đ |
| Web Animation API | |
5/5 | 3/5 | normal đ |
| requestAnimationFrame() |  |
4/5 | 5/5 | normal đ |
| Frameworks JS | |
5/5 | 3/5 | normal đ |
| Librairies JS | |
4/5 | 5/5 | difficile đŹ |
| Canvas 2D |  |
4/5 | 2/5 | difficile đ± |
| Canvas WebGL | |
5/5 | 2/5 | hardcore â ïž |
