Julien Sulpis
Salut đ moi c'est
J'aime faire des trucs cools sur le web
Ăa va ĂȘtre dense !
(mais fun)
<canvas />
Modification dynamique de la page
Quelles sont les propriétés CSS de chaque élément HTML ?
Quelle est la position et la taille de chaque élément sur la page ?
Dessine un rectancle violet Ă la position {X,Y} sur un calque A
Assemble et dessine les calques
RecalculĂ© Ă chaque frame đ
CPU
CPU
GPU
CPU
GPU
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;
}đ
Images et technique : CSS Tricks - Advanced CSS Animation Using cubic-bezier()
đ
.icon:hover {
transition-property: transform;
transition-duration: 800ms;
transition-timing-function: cubic-bezier(0.5, 700, 0.5, -700);
transform: rotate(0.0004turn);
}đ
đ€
đ€
@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);
}| Ătapes calculĂ©es | Performance | Polyvalence | DifficultĂ© |
|---|---|---|---|
 |
5/5 | 4/5 | facile đ |
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryBorderColor': 'black',
'secondaryBorderColor': 'black',
'tertiaryBorderColor': 'gray',
'fontSize': '18px'
}
}
}%%
flowchart
subgraph native["APIs natives "]
direction LR
trans(Transition CSS)
end
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
animation-play-state: running | paused;
animation-direction: normal | reverse | alternate | alternate-reverse;
animation-delay: ...s;
animation-play-state: paused;
animation-delay: 0.00s;
.card {
animation-name: flipCard;
animation-duration: var(--duration);
animation-play-state: paused;
animation-fill-mode: forwards;
animation-delay: calc(-1 * var(--progress) * var(--duration));
}Tentez-vous votre chance ?
C'est gagné !
| Ătapes calculĂ©es | Performance | Polyvalence | DifficultĂ© |
|---|---|---|---|
|
5/5 | 3/5 | facile đ |
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryBorderColor': 'black',
'secondaryBorderColor': 'black',
'tertiaryBorderColor': 'gray',
'fontSize': '18px'
}
}
}%%
flowchart
subgraph native["APIs natives "]
direction LR
trans(Transition CSS) --> anim(Animation CSS)
end
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();
const animation = card.animate(keyframes, options);
animation.pause();
...
animation.play();
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é !
| Ătapes calculĂ©es | Performance | Polyvalence | DifficultĂ© |
|---|---|---|---|
|
5/5 | 3/5 | normal đ |
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryBorderColor': 'black',
'secondaryBorderColor': 'black',
'tertiaryBorderColor': 'gray',
'fontSize': '18px'
}
}
}%%
flowchart
subgraph native["APIs natives "]
direction LR
trans(Transition CSS) --> anim(Animation CSS)
anim --> waapi(Web Animation API)
end
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);
});
| Ătapes calculĂ©es | Performance | Polyvalence | DifficultĂ© |
|---|---|---|---|
 |
4/5 | 5/5 | normal đ |
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryBorderColor': 'black',
'secondaryBorderColor': 'black',
'tertiaryBorderColor': 'gray',
'fontSize': '18px'
}
}
}%%
flowchart
subgraph native["APIs natives "]
direction LR
trans(Transition CSS) --> anim(Animation CSS)
anim --> waapi(Web Animation API)
waapi --> raf(requestAnimationFrame)
end
Partie 2
Une derniĂšre technique...
Une derniĂšre technique...
Usage: dĂ©placement d'Ă©lĂ©ments dans le DOM, ou autres animations qui ne peuvent ĂȘtre faites nativement.
const element = document.querySelector(".my-element");
const first = element.getBoundingClientRect();
arrangeItems();
const last = element.getBoundingClientRect();
const deltaX = first.left - last.left;
const deltaY = first.top - last.top;
element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;item.animate(
[
{ transform: `translate(${deltaX}px, ${deltaY}px)` },
{ transform: "none" },
],
{ duration: 300, easing: "ease-in-out" }
);<Transition />
<TransitionGroup />
<Transition />
<Transition>
<p v-if="show">Bonjour</p>
</Transition><Transition />
<Transition />
<Transition mode="out-in">
<SkeletonLoading v-if="state === 'loading'" />
<Content v-else />
</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 { ... }| Ătapes calculĂ©es | Performance | Polyvalence | DifficultĂ© |
|---|---|---|---|
|
5/5 | 3/5 | normal đ |
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryBorderColor': 'black',
'secondaryBorderColor': 'black',
'tertiaryBorderColor': 'gray',
'fontSize': '18px'
}
}
}%%
flowchart
subgraph native["APIs natives "]
direction LR
trans(Transition CSS) --> anim(Animation CSS)
anim --> waapi(Web Animation API)
waapi --> raf(requestAnimationFrame)
end
subgraph frameworks["Frameworks JS"]
direction TB
subgraph Vue
vueTransition[<Transition />, <TransitionGroup />]
end
subgraph Svelte
transition[transition, motion, animate]
end
subgraph React
shrug("ÂŻ\_ (ă)_/ÂŻ")
end
subgraph Angular
angularanimation("@angular/animations")
end
end
native --> frameworks
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
Alternative Ă Framer Motion
function MyComponent() {
const props = useSpring({
from: { opacity: 0 },
to: { opacity: 1 },
})
return <animated.div style={props}>Hello World</animated.div>
}| Transitions | FLIP | Tween | Spring | Web Animation API | requestAnimationFrame |
|---|---|---|---|---|---|
| â | â | â | â | â | â |
Taille (min + gzip) : 19.4kB
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 "simple"
gsap.to(".box", {
rotation: 45,
x: 100,
duration: 1,
});Animation "simple"
@GreenSock
: 3D Animation with GSAP
Ăchelonnement ("stagger")
anime({
targets: '.box',
translateX: 200,
delay: anime.stagger(100)
});Ăchelonnement ("stagger")
Ăchelonnement ("stagger")
Scroll / Visibilité
scroll(
animate(".progress-bar", { scaleX: [0, 1] })
);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) : 108.4kB
| Ătapes calculĂ©es | Performance | Polyvalence | DifficultĂ© |
|---|---|---|---|
|
4/5 | 5/5 | difficile đŹ |
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryBorderColor': 'black',
'secondaryBorderColor': 'black',
'tertiaryBorderColor': 'gray',
'fontSize': '18px'
}
}
}%%
flowchart
subgraph native["APIs natives "]
direction LR
trans(Transition CSS) --> anim(Animation CSS)
anim --> waapi(Web Animation API)
waapi --> raf(requestAnimationFrame)
end
subgraph frameworks["Frameworks JS"]
direction TB
subgraph Vue
vueTransition[<Transition />, <TransitionGroup />]
end
subgraph Svelte
transition[transition, motion, animate]
end
subgraph React
shrug("ÂŻ\_ (ă)_/ÂŻ")
end
subgraph Angular
angularanimation("@angular/animations")
end
end
subgraph libs1["Librairies Vanilla JS"]
direction TB
motionone(Motion One)
animejs(Anime.js)
gsap(GSAP)
lottie(Lottie)
end
subgraph libs2["Librairies liées à un framework"]
direction TB
framer(Framer Motion)
vuemotion("@vueuse/motion")
end
native --> frameworks
native --> libs1
frameworks --> libs1
frameworks --> libs2
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
| Ătapes calculĂ©es | Performance | Polyvalence | DifficultĂ© |
|---|---|---|---|
 |
4/5 | 2/5 | difficile đ± |
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryBorderColor': 'black',
'secondaryBorderColor': 'black',
'tertiaryBorderColor': 'gray',
'fontSize': '18px'
}
}
}%%
flowchart
subgraph native["APIs natives"]
direction LR
trans(Transition CSS) --> anim(Animation CSS)
anim --> waapi(Web Animation API)
waapi --> raf(requestAnimationFrame)
end
subgraph frameworks["Frameworks JS"]
direction TB
subgraph Vue
vueTransition[<Transition />, <TransitionGroup />]
end
subgraph Svelte
transition[transition, motion, animate]
end
subgraph React
shrug("ÂŻ\_ (ă)_/ÂŻ")
end
subgraph Angular
angularanimation("@angular/animations")
end
end
subgraph libs1["Librairies Vanilla JS"]
direction TB
motionone(Motion One)
animejs(Anime.js)
gsap(GSAP)
lottie(Lottie)
end
subgraph libs2["Librairies liées à un framework"]
direction TB
framer(Framer Motion)
vuemotion("@vueuse/motion")
end
subgraph canvas2D["Canvas 2D"]
direction TB
canvas2Dapi("Canvas 2D API")
fabric(Fabric)
rive(Rive)
end
native --> frameworks
native --> libs1
frameworks --> libs1
frameworks --> libs2
libs1 & libs2 --> a{" "}
a --> canvas2D
Usage: mettre une claque Ă vos utilisateurs Ă coup d'animations qui sortent de l'ordinaire
<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, 0, 1]),
gl.STATIC_DRAW
);
vertexBuffer.itemSize = 2;
vertexBuffer.numItems = 3;
// 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.TRIANGLES, 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(
camera.position,
{
x: 1
duration: 2,
}
);Renderer React pour three.js
Renderer React pour three.js
Librairie de composants three.js pour Vue
Renderer React pour three.js
Librairie de composants three.js pour Vue
Librairie de composants three.js pour Svelte
Il n'y a pas que three.js ...
Version trÚs (trÚs) allégée de three.js (6.9kB)
Version trÚs (trÚs) allégée de three.js (6.9kB)
Moteur de rendu WebGL 2D (219.6kB)
Version trÚs (trÚs) allégée de three.js (6.9kB)
Moteur de rendu WebGL 2D (219.6kB)
Runtime pour des animations interactives, supporte Canvas 2D et WebGL (24.9kB)
GPU
geométrie
@jsulpis
: Image deformation with WebGL shaders
geométrie
@André Mattos
: Loading...
couleur
couleur
couleur
| Ătapes calculĂ©es | Performance | Polyvalence | DifficultĂ© |
|---|---|---|---|
|
5/5 | 2/5 | hardcore â ïž |
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryBorderColor': 'black',
'secondaryBorderColor': 'black',
'tertiaryBorderColor': 'gray',
'fontSize': '18px'
}
}
}%%
flowchart
subgraph native["APIs natives"]
direction LR
trans(Transition CSS) --> anim(Animation CSS)
anim --> waapi(Web Animation API)
waapi --> raf(requestAnimationFrame)
end
subgraph frameworks["Frameworks JS"]
direction TB
subgraph Vue
vueTransition[<Transition />, <TransitionGroup />]
end
subgraph Svelte
transition[transition, motion, animate]
end
subgraph React
shrug("ÂŻ\_ (ă)_/ÂŻ")
end
subgraph Angular
angularanimation("@angular/animations")
end
end
subgraph libs1["Librairies Vanilla JS"]
direction TB
motionone(Motion One)
animejs(Anime.js)
gsap(GSAP)
lottie(Lottie)
end
subgraph libs2["Librairies liées à un framework"]
direction TB
framer(Framer Motion)
vuemotion("@vueuse/motion")
end
subgraph canvas2D["Canvas 2D"]
direction TB
canvas2Dapi("Canvas 2D API")
fabric(Fabric)
rive(Rive)
end
subgraph webgl["Canvas WebGL"]
direction TB
three("three.js")
shree(shree.js)
pixi(pixi.js)
subgraph shaders
direction TB
vertex
fragment
end
three --> shaders
shree --> shaders
pixi --> shaders
end
native --> frameworks
native --> libs1
frameworks --> libs1
frameworks --> libs2
libs1 & libs2 --> a{" "}
a --> canvas2D & webgl
%%{
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 d'animations possibles !
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 */
}@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}@media (prefers-reduced-motion: no-preference) {
.element {
animation-name: myAwesomeAnimation;
...
}
}if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
animate();
}<canvas
height="400"
width="650"
role="img"
aria-label="Texture de Bob l'Ăponge qui ondule">
</canvas>
| 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 â ïž |
