Salut 👋 moi c'est

Julien Sulpis

@jsulpis

Consultant web / Tech Lead front-end chez

J'essaie de faire des interfaces qu'on a envie d'utiliser

Transitions	FLIP	Tween	Spring	Web Animation API	requestAnimationFrame
✅	✅	✅	✅	✅	✅

Transitions	FLIP	Tween	Spring	Web Animation API	requestAnimationFrame
✅	✅	✅	✅	✅	✅

Librarie	Fonction "animate"	Timeline	Stagger	Scroll	Spring	WAAPI	SVG	Poids
GSAP	✅	✅	✅	✅	❌	❌	✅	23.5kB
Anime.js	✅	✅	✅	✅	✅	❌	✅	7kB
Motion One	✅	✅	😐	✅	✅	✅	😐	3.8kB

Salut 👋 moi c'est Julien Sulpis @jsulpis Consultant web / Tech Lead front-end chez J'essaie de faire des interfaces qu'on a envie d'utiliser

	.demo {
	transition: transform 800ms ease-in-out;

	&:checked {
	transform: translateX(80%);
	}
	}

	.demo {
	transition: transform 800ms ease-in-out;

	&:checked {
	transform: translateX(80%);
	}
	}

	.demo {
	transition: transform 800ms ease-in-out;

	&:checked {
	transform: translateX(80%);
	}
	}

	.demo {
	transition: transform 800ms ease-in-out;

	&:checked {
	transform: translateX(80%);
	}
	}

	.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);
	}

	@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);
	}

	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);

	animation.pause();
	...
	animation.play();
	animation.cancel();
	animation.reverse();

	function loop(callback) {
	(function animate() {
	callback();
	requestAnimationFrame(animate);
	})();
	}

	loop(() => {
	// c'est plus clair !
	})

	loop(() => {
	// interpoler "progress"
	...
	element.textContent = progress;
	});

	loop(() => {
	// interpoler "progress"
	...
	element.setAttribute('value', progress);
	});

	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 { ... }

	export const MyComponent = ({ isVisible }) => (
	<AnimatePresence>
	{isVisible && (
	<motion.div
	initial={{ opacity: 0 }}
	animate={{ opacity: 1 }}
	exit={{ opacity: 0 }}
	/>
	)}
	</AnimatePresence>
	)

	export const MyComponent = ({ isVisible }) => (
	<AnimatePresence>
	{isVisible && (
	<motion.div
	initial={{ opacity: 0 }}
	animate={{ opacity: 1 }}
	exit={{ opacity: 0 }}
	/>
	)}
	</AnimatePresence>
	)

	export const MyComponent = ({ isVisible }) => (
	<AnimatePresence>
	{isVisible && (
	<motion.div
	initial={{ opacity: 0 }}
	animate={{ opacity: 1 }}
	exit={{ opacity: 0 }}
	/>
	)}
	</AnimatePresence>
	)

	const canvas = document.querySelector("canvas");
	const ctx = canvas.getContext("2d");

	ctx.fillStyle = "hsl(200deg, 100%, 50%)";
	ctx.fillRect(100, 100, 200, 200);

	// 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);

	attribute vec3 position;
	uniform float time;

	void main() {
	gl_Position = vec4(position.x, position.y, sin(time), 1.0);
	}

Technique	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 ☠️