animate
Anime le CSS, les transformations, le SVG, les variables CSS ou un objet. Les couleurs et les unités se mélangent.
animate('.card', {
y: [60, 0],
opacity: [0, 1],
backgroundColor: '#F56E2E',
}, { delay: stagger(80), ease: 'kaury' })Un outil gratuit de Kaury Studio
Des animations dignes d’un studio pour ton site. Tu choisis un effet, tu le règles à la souris, puis tu télécharges une page toute prête ou tu copies le code. Pas besoin de savoir coder.
Parcours la galerie : chaque carte montre l’effet en direct et dit à quoi il sert.
Pars d’un style prêt en un clic, puis change le texte, les couleurs et la vitesse. L’aperçu bouge en direct.
Télécharge une page toute prête ou copie le code dans ton site. Aucun compte, aucune installation.
Chaque carte tourne en direct. Clique sur celle qui te plaît pour la personnaliser.
Aucun effet ne correspond. Essaie un autre mot, comme « texte » ou « 3D ».
Les effets s’enchaînent de haut en bas, un par écran. Change l’ordre avec les flèches.
Ta page est vide. Ouvre un effet et clique sur « Ajouter à ma page ».
Tout ce que fait le studio s’écrit aussi à la main. Le framework pèse 11 Ko, n’a aucune dépendance et respecte le réglage « réduire les animations » du système.
Anime le CSS, les transformations, le SVG, les variables CSS ou un objet. Les couleurs et les unités se mélangent.
animate('.card', {
y: [60, 0],
opacity: [0, 1],
backgroundColor: '#F56E2E',
}, { delay: stagger(80), ease: 'kaury' })De vrais ressorts physiques. La durée découle de la physique.
animate('.pill', { scale: [0.6, 1] }, {
ease: spring({ stiffness: 220, damping: 12 }),
})Enchaîne des étapes. '-=200' ou '<' les font se chevaucher.
timeline({ defaults: { ease: 'kaury' } })
.add('.logo', { scale: [0, 1] })
.add('.title', { y: ['110%', '0%'] }, {}, '-=500')
.add('.cta', { opacity: [0, 1] }, {}, '<')Décale chaque élément : depuis le début, la fin, le centre, les bords, au hasard, en grille.
animate('.dot', { scale: [0, 1] }, {
delay: stagger(40, { grid: [12, 8], from: 'center' }),
})Découpe en lettres, mots ou lignes en gardant le texte lisible par les lecteurs d’écran.
reveal('h1', { effect: 'rise', by: 'chars' })
wave('.slogan', { amplitude: 12 })
scramble('.code', { text: 'KAURY' })
counter('.stat', { to: 12500, suffix: '+' })Les effets continus renvoient une fonction qui les arrête.
magnetic('.btn', { strength: 0.4 })
tilt('.card', { max: 14, glare: true })
extrude('.logo', { depth: 40 })
scrub(timeline, { trigger: '.section' })Ajoute le script avec data-auto et écris des attributs. Les effets se combinent avec des espaces.
<script src="kaury-motion.min.js" data-auto></script>
<h1 data-km="rise" data-km-by="chars">Donne du caractère</h1>
<p data-km="wave">Toujours en mouvement</p>
<div data-km="marquee" data-km-speed="120" data-km-scroll-boost="1">…</div>
<div data-km="extrude tilt float" data-km-depth="40"><svg>…</svg></div>