Un tuto simple qui aborde l'animation d'un SVG simple avec des transitions CSS.
Uploadez un dessin de personnage, ce service utilise l'IA pour l'animer.
Une lib JavaScript pour créer des animations. Son poids est très réduit mais elle semble complète en terme de fonctionnalités. Elle possède en outre des helpers pour Vue et Solid.
Via https://youtu.be/7HDiV-yaquQ
Une lib JavaScript qui permet d'animer automatiquement (et avec une seule ligne de code) les changements appliqués à une collection d'éléments (ajout, suppression, tri).
En gros, ça permet de rendre les ajouts ou suppression d'éléments du DOM plus visibles pour vos utilisateurs, sans trop se prendre la tête à gérer l'animation à la main.
Je n'ai pas encore creusé pour voir comment ça fonctionne mais les exemples sont assez convainquant.
Et il existe des directives pour React, Vue et Svelte.
Une autre lib Vue pour effectuer une transition animée d'un composant entre deux pages.
Une lib Vue qui permet de créer des transitions pour un composant entre son affichage dans une page A et son affichage dans une page B. Un peu à la manière de ce que préconise Material Design, pour conserver un maximum de contexte lors d'une navigation.
Un outil pour générer des animations CSS3 via une interface graphique. Il existe aussi une lib JS qui permet de faire la même chose dynamiquement en JS.
100 animations hover en CSS. Histoire de change du classique changement de couleur ou soulignement.
Tout est dans le titre :)
Cet article est très didactique, parfait pour bien comprendre les transitions CSS. Il n'aborde cependant pas les animations CSS à proprement parler.
Une chouette introduction aux animations CSS en utilisant des path SVG.
Animer du texte.
Une grosse liste de librairies pour gérer les animations CSS.
Une introduction à Animate.css.
Si dans Vue.js vos animations CSS clignotent dans IE 11, pensez à ajouter animation-fill-mode: forwards;
sur l'élément auquel l'animation est affecté.
Des animations de menu hamburger absolument délicieuses. Le tout sans Javascript (si on omet le simple onclick dans le HTML). Merci SVG.
Un retour d'expérience sur une migration de React vers Vue.js (et accessoirement de GSAP vers anime.js).
Comment des petites animations permettent d'améliorer l'expérience.
Un outil en ligne pour facilement animer du SVG.
Une toute petite librairie Javascript (1ko) pour détecter si un élément est présent à l'écran ou non. Très pratique pour faire des animations au scroll.
Via https://www.creativejuiz.fr/blog/ressources-telechargements/les-ressources-du-web-36
Un outil pour animer des éléments pour le web. En bêta privée pour le moment mais ça a l'air prometteur.
Faites danser vos lettres !
Un exemple intéressant pour donner l'impression qu'un site classique est une single-page application. Il s'agit de fluidifier les transitions entre les pages.
Pas certain que ça ait un énorme intérêt et certains morceaux de code font un peu bricolage mais l'idée est intéressante.
Moult frameworks d'animations CSS.
Des icônes animées par Javascript.
Plein d'idées d'animations.
Transition de path svg.
Les animations ne doivent pas être laissées au hasard.
Analyser les performances de vos animations CSS avec les outils de développement de Firefox.
Très ingénieux. Je pense que c'est déjà assez largement utilisé sans qu'on s'en rende compte.
L'idée est de ne pas utiliser d'animations basiques mais plutôt des animations différentes en fonction de l'action qui vient d'être faite.
Si vous avez la flemme de tout lire, les vidéos sont très parlantes.
Via https://mastodon.social/users/stephaniewalter/updates/2406448
Quelques exemples d'éléments graphiques avec de belles animations.
Article très intéressant sur l'art et la manière de créer des animations fluides et "naturelles". Clairement, l'optimisation n'est pas simple lorsque l'on vise les 60 FPS constants.
Belle démo d'animation CSS.
Jouer avec les animations CSS en live.
Plein de styles de checkbox, certaines en full CSS, d'autres avec du Javascript en plus.
Une chouette animation pour le menu hamburger.
Sous le coude.
Utilisation de Three.js pour animer des scènes plus ou moins complexes.
Bluffant.
Des effets hover originaux (un peu lourds pour certains).
Animer du SVG en CSS.
Des effets "hover" assez originaux.
Via https://blog.stephaniewalter.fr/semaine-pixels-25-novembre-2016/
Impressionant o_O
Via https://blog.stephaniewalter.fr/semaine-pixels-18-novembre-2016/
Une autre lib JS pour gérer les animations CSS en JS.
Un petit topo sur les performances et l'optimisation des animations CSS. En outre, on y montre comment visualiser tout ça avec les outils de développement.
Une librairie Javascript pour faire des animations au scroll.
Comme dit dans la source, attention à ne pas en abuser, et surtout attention à mettre un timer suffisamment court. Il n'y a rien de plus chiant que les sites sur lesquels il faut attendre 2 secondes à chaque scroll pour que le contenu apparaisse.
Via https://blog.stephaniewalter.fr/semaine-pixels-19-aout-2016/
Une librairie qui permet de construire des animations CSS purement en JS. C'est assez intéressant dans le sens où ça combine la flexibilité des animations jQuery de la vieille époque avec l'optimisation et la rapidité des animations CSS modernes.
Et comme la fonction attend un objet Javascript, c'est assez facile de définir quelques animations et de les réutiliser.
Le repo Github est ici : https://github.com/juliangarnier/anime
Un effet glitch très bien foutu à appliquer sur du texte. Et c'est du pur CSS.
Via https://www.djerfy.com/css-ajouter-effet-glitch/