Apparaitre avec elegance
Les fondamentaux. Chaque element entre en scene avec un effet simple mais soigne. Ce sont les briques de base de toute animation reussie.
L'element apparait progressivement en augmentant son opacite de 0 a 1. L'animation la plus classique et la plus polyvalente.
data-animate="fade"
Apparition avec un leger mouvement vers le haut (translateY). Donne une impression de legerete et de dynamisme naturel.
data-animate="rise"
L'element commence flou et se met au point progressivement, comme un objectif photo. Effet premium et cinematique.
data-animate="blur"
L'element arrive avec une deformation en biais qui se corrige. Ajoute du caractere et un style editorial affiche.
data-animate="skew"
L'element grandit depuis un point central. L'effet de zoom attire l'attention et cree une hierarchie visuelle.
data-animate="scale"
Stagger (cascade)
Le stagger ajoute un delai progressif entre chaque element d'un groupe. L'effet cascade est bien plus engageant qu'une apparition simultanee.
Sans stagger
Tous les elements apparaissent en meme temps.
data-animate="rise"Avec stagger
Les elements apparaissent en cascade, un apres l'autre.
data-animate="rise" data-stagger="0.1"Split text
Divisez automatiquement un texte en mots, lignes ou caracteres pour animer chaque morceau independamment.
Sans split
Le texte entier apparait comme un seul bloc.
data-animate="rise"Avec split
Chaque mot arrive separement avec un stagger automatique.
data-animate="rise" data-split="words"Scrub (defilement lie)
Liez la progression de l'animation a la position du scroll — l'element suit le rythme de l'utilisateur.
Animation normale
L'animation se joue une fois au scroll.
data-animate="rise"Avec scrub
L'animation suit la position de la souris (ou du scroll).
data-animate="rise" data-scrub="true"Timeline (multi-etapes)
Chainez plusieurs animations en sequence pour creer des micro-interactions narratives et fluides.
Animation simple
Un seul mouvement, une seule etape.
data-animate="rise"Timeline multi-etapes
Plusieurs animations chainees pour un effet narratif.
data-animate="rise" data-timeline="step1|step2|step3"Options disponibles
Vitesse & delai
Controlez la duree et le delai de chaque animation avec des attributs data simples.
data-duration="1.2" data-delay="0.3"Responsive
Desactivez ou modifiez les animations selon la taille d'ecran. Mobile-first par defaut.
data-animate-mobile="fade"Boucle infinie
Faites tourner une animation en boucle pour attirer l'attention en continu.
data-animate-loop="pulse"Declencheur clic
Lancez une animation au clic sur un bouton ou un element interactif.
data-animate-trigger="click"Modifier les presets
Combinez plusieurs options pour creer votre propre animation unique.
data-animate="rise" data-y="80"Animations de texte
Divisez et animez le texte par mots, lignes ou caracteres avec split.
data-split="words" data-stagger="0.05"Reveler avec style
Des effets de masque CSS (clip-path) pour devoiler vos contenus de maniere theatrale. Wipe pour les rideaux, Circle pour les ouvertures en iris.
Wipe / Rideau
L'element se revele par un rideau qui glisse de gauche a droite. Effet cinematique et elegant.
data-animate="wipe"
Rideau qui glisse de droite a gauche. Ideal pour varier la direction dans une mise en page alternee.
data-animate="wipe-right"
Rideau vertical de bas en haut. Le contenu se devoile comme un store qui s'ouvre.
data-animate="wipe-up"
Rideau vertical de haut en bas. Parfait pour les headers et les elements en haut de section.
data-animate="wipe-down"
Circle / Iris
Revelation par un cercle qui s'agrandit depuis le centre. Effet iris de camera classique.
data-animate="circle"
Le cercle s'ouvre depuis le haut de l'element. Direction verticale haute.
data-animate="circle-top"
Le cercle emerge du bas. Effet de revelation montante naturelle.
data-animate="circle-bottom"
Le cercle apparait depuis la gauche. Pour des mises en page asymetriques.
data-animate="circle-left"
Le cercle apparait depuis la droite. Complement naturel de circle-left.
data-animate="circle-right"
Se deplacer avec intention
Les elements arrivent avec un mouvement directionnel. Slides, rolls, drops — chaque deplacement raconte une histoire et guide le regard.
L'element glisse depuis la gauche vers sa position finale. Mouvement lateral fluide et naturel.
data-animate="slide-left"
L'element glisse depuis la droite. Mouvement symetrique ideal pour alterner les directions.
data-animate="slide-right"
L'element monte depuis le bas de la zone visible. Mouvement ascendant energique.
data-animate="slide-up"
L'element descend depuis le haut. Parfait pour les menus deroulants et les notifications tombantes.
data-animate="slide-down"
L'element quitte la scene vers la gauche. Animation de sortie pour les transitions de contenu.
data-animate="slide-out-left"
L'element sort par la droite. Sortie naturelle pour les navigations et les sliders.
data-animate="slide-out-right"
Vitesse & Dynamique
Entree ultra-rapide avec un skew dynamique qui se corrige a l'arrivee. Effet spectaculaire et memorable.
data-animate="lightspeed"
Sortie eclair avec skew inverse. L'element s'envole a toute vitesse vers la droite.
data-animate="lightspeed-out"
L'element roule en entrant, combinant translation et rotation. Effet ludique et engageant.
data-animate="roll-in"
L'element roule en sortant de la scene. Sortie avec caractere et mouvement.
data-animate="roll-out"
L'element tombe du haut avec un rebond naturel (ease: bounce). Effet de pesanteur realiste.
data-animate="drop-in"
L'element tombe vers le bas et disparait. Sortie avec gravite, comme si l'element perdait prise.
data-animate="drop-out"
Rebonds & Explosions
L'element apparait avec un rebond elastique depuis le centre. Entree joyeuse et dynamique.
data-animate="bounce-in"
L'element retrecit et disparait avec un leger rebond inverse. Sortie propre et energique.
data-animate="bounce-out"
L'element arrive en se contractant depuis une taille enorme avec du flou. Entree explosive et spectaculaire.
data-animate="explode-in"
L'element explose vers l'exterieur en grossissant et se floutant. Sortie theatrale.
data-animate="explode-out"
L'element se materialise doucement depuis un nuage flou. Apparition douce et etheree.
data-animate="puff-in"
L'element se dissipe comme de la fumee en grossissant et se floutant. Disparition etheree.
data-animate="puff-out"
Effets atmospheriques
L'element emerge d'un nuage de fumee dense. Le flou se dissipe progressivement pour reveler le contenu.
data-animate="smoke-in"
L'element se dissout en fumee en montant. Disparition atmospherique et poetique.
data-animate="smoke-out"
L'element apparait en tournant et grandissant depuis le centre, comme un feu d'artifice. Effet festif.
data-animate="firework-in"
L'element implose en tournant et retrecissant. Sortie dramatique et energique.
data-animate="firework-out"
Profondeur
L'element se deplace verticalement a une vitesse differente du scroll, creant un effet de profondeur immersif.
data-animate="parallax-y"
Mouvement horizontal en parallaxe. L'element glisse lateralement pour un effet de profondeur lateral.
data-animate="parallax-x"
L'element surgit depuis la profondeur avec un effet de perspective 3D. Comme s'il traversait l'ecran.
data-animate="depth-zoom"
Tourner en 3 dimensions
Rotations, flips et effets de perspective. Ajoutez de la profondeur a vos interfaces avec des transformations 3D saisissantes.
L'element effectue une rotation de 90 degres en apparaissant. Mouvement rotatif simple et elegant.
data-animate="rotate-90"
Demi-tour complet en apparaissant. Rotation plus prononcee pour un effet dramatique.
data-animate="rotate-180"
Tour complet sur lui-meme en apparaissant. Effet spectaculaire de rotation totale.
data-animate="rotate-360"
L'element tourne et grandit simultanement depuis le centre. Entree dynamique avec scale et rotation.
data-animate="rotate-in"
L'element tourne et retrecit en disparaissant. Sortie elegante avec rotation et reduction.
data-animate="rotate-out"
Flips
Retournement horizontal autour de l'axe X. L'element bascule vers l'avant en 3D.
data-animate="flip-x"
Retournement vertical autour de l'axe Y. L'element pivote lateralement en 3D.
data-animate="flip-y"
Retournement X complet (180 degres) en entrant. L'element fait un flip complet vers l'avant.
data-animate="flip-x-in"
Retournement Y complet en entrant. Flip lateral complet pour un effet de carte retournee.
data-animate="flip-y-in"
L'element se retourne vers l'avant en sortant. Sortie 3D avec bascule horizontale.
data-animate="flip-x-out"
L'element pivote lateralement en disparaissant. Sortie 3D avec rotation sur l'axe Y.
data-animate="flip-y-out"
Cards & Cubes
Retournement de carte classique a 180 degres. L'element tourne comme une carte qu'on retourne.
data-animate="card-flip"
Retournement de carte dans le sens inverse. Meme effet mais en sens oppose.
data-animate="card-flip-reverse"
Rotation cubique autour de l'axe X. L'element surgit du bas comme une face de cube qui tourne.
data-animate="cube-rotate-x"
Rotation cubique autour de l'axe Y. L'element arrive par le cote comme un cube qui pivote.
data-animate="cube-rotate-y"
Portes & Plis
L'element s'ouvre comme une porte sur sa charniere gauche. Effet de porte qui s'ouvre en 3D.
data-animate="door-open"
Meme effet de porte mais pivotant depuis la charniere droite. Ouverture symetrique.
data-animate="door-open-right"
La porte se ferme en pivotant sur sa charniere. L'element disparait comme une porte qui se referme.
data-animate="door-close"
L'element se deplie depuis le haut, comme une feuille qu'on ouvre. Entree avec pli 3D.
data-animate="fold-in"
L'element se replie vers le bas et disparait. Sortie avec effet de papier qui se plie.
data-animate="fold-out"
L'element se deplie horizontalement depuis la gauche. Expansion laterale progressive.
data-animate="fold-horizontal"
L'element se deplie verticalement depuis le haut. Expansion descendante progressive.
data-animate="fold-vertical"
Peek & Tilts
L'element jette un coup d'oeil depuis la gauche avec une legere rotation 3D. Apparition curieuse.
data-animate="peek-left"
Coup d'oeil depuis la droite avec rotation 3D inverse. Apparition laterale subtile.
data-animate="peek-right"
L'element apparait depuis le haut avec une bascule 3D vers l'avant. Comme s'il se penchait.
data-animate="peek-top"
Apparition depuis le bas avec bascule 3D. L'element remonte en se penchant legerement.
data-animate="peek-bottom"
L'element s'incline legerement vers la gauche en apparaissant. Rotation douce depuis le coin bas-droit.
data-animate="tilt-left"
Inclinaison vers la droite en apparaissant. Rotation douce depuis le coin bas-gauche.
data-animate="tilt-right"
L'element bascule vers l'avant en 3D en apparaissant. Effet de profondeur subtil.
data-animate="tilt-forward"
Bascule vers l'arriere en 3D. L'element semble reculer legerement en apparaissant.
data-animate="tilt-back"
Mouvements 3D
L'element surgit depuis la profondeur extreme, comme s'il traversait un tunnel vers l'ecran.
data-animate="tunnel-zoom"
Rotation complete (360 degres) combinee avec un zoom. L'element fait un tonneau spectaculaire.
data-animate="barrel-roll"
Tonneau dans le sens inverse. Meme effet spectaculaire mais en sens antihoraire.
data-animate="barrel-roll-reverse"
L'element vole depuis la gauche avec une rotation 3D en perspective. Entree aerienne dynamique.
data-animate="fly-in-left"
Vol depuis la droite avec perspective 3D. Entree aerienne symetrique.
data-animate="fly-in-right"
L'element s'envole vers la gauche avec rotation 3D. Sortie aerienne spectaculaire.
data-animate="fly-out-left"
Envol vers la droite avec perspective. Sortie dynamique et aerienne.
data-animate="fly-out-right"
L'element surgit depuis la profondeur avec un rebond elastique. Effet de pop en 3D.
data-animate="pop-z-in"
L'element recule dans la profondeur et disparait. Sortie en 3D vers l'arriere.
data-animate="pop-z-out"
Devoiler avec des formes
Des masques CSS clip-path avances pour reveler vos images et contenus avec des formes geometriques originales.
Revelation en diagonale depuis la gauche par clip-path. L'image se devoile avec un angle dynamique de gauche a droite.
data-animate="diagonal-left"
Revelation en diagonale depuis la droite. L'image se devoile de droite a gauche avec un angle graphique.
data-animate="diagonal-right"
Losanges
Revelation en forme de losange depuis le centre. Geometrie elegante pour mettre en valeur une image.
data-animate="diamond"
Le losange se referme vers le centre. L'image disparait en se contractant dans une forme de diamant.
data-animate="diamond-reverse"
Triangles
Revelation triangulaire pointant vers le haut. Forme dynamique qui attire le regard vers le sommet.
data-animate="triangle-up"
Triangle pointant vers le bas. L'image se revele dans une forme inversee, regard dirige vers le contenu suivant.
data-animate="triangle-down"
Triangle pointant vers la gauche. L'image apparait dans une forme directionnelle laterale.
data-animate="triangle-left"
Triangle pointant vers la droite. Forme directionnelle qui guide le regard vers la suite.
data-animate="triangle-right"
Hexagones
Revelation hexagonale — la forme organique parfaite. Populaire dans le design moderne et le gaming.
data-animate="hexagon"
L'hexagone se contracte vers le centre et disparait. Sortie geometrique propre et satisfaisante.
data-animate="hexagon-reverse"
Ellipses
Revelation par une ellipse qui s'agrandit depuis le centre. Plus organique qu'un cercle parfait.
data-animate="ellipse"
Ellipse etirée horizontalement. L'image se revele dans un ovale large, ideal pour les formats paysage.
data-animate="ellipse-horizontal"
Formes organiques
Masque organique octogonal qui se deploie depuis le centre. Forme douce et arrondie, entre cercle et carre.
data-animate="blob-morph"
Masque organique asymetrique et irregulier. Forme libre et naturelle pour un effet artistique unique.
data-animate="blob-random"
Formes geometriques
Revelation en etoile a 5 branches depuis le centre. Forme iconique et festive qui attire l'attention.
data-animate="star"
Masque en forme de croix (plus) qui se deploie depuis le centre. Forme medicale ou d'ajout.
data-animate="cross"
Revelations progressives
Revelation progressive de gauche a droite par inset clip-path. Effet de rideau elegant et cinematique.
data-animate="gradient-reveal"
Revelation progressive de droite a gauche. Version inversee pour alterner les sens de revelation.
data-animate="gradient-reveal-reverse"
Filtrer avec creativite
Animez les filtres CSS pour creer des transitions visuelles uniques. Du flou a la couleur, chaque filtre transforme la perception.
Le flou se dissipe progressivement pour reveler l'element. Comme un objectif qui fait la mise au point.
data-animate="blur-in"
Un leger flou se dissipe avec un fondu d'opacite. Effet de mise au point douce, comme un objectif photo.
data-animate="focus"
Couleur
L'image passe du noir et blanc a la couleur. Transition classique et toujours impressionnante.
data-animate="grayscale"
L'image perd sa teinte sepia pour reveler ses vraies couleurs. Effet vintage vers moderne.
data-animate="sepia"
Les couleurs de l'image tournent sur le spectre chromatique avant de se stabiliser. Effet psychedelique.
data-animate="hue-rotate"
Luminosite
L'image part d'une luminosite extreme (blanche) et revient a la normale. Effet flash photographique.
data-animate="brightness"
L'image passe d'un contraste extreme a la normale. Les zones claires et sombres se stabilisent progressivement.
data-animate="contrast"
Les couleurs passent d'une saturation intense a leur etat naturel. L'image perd son effet psychedelique.
data-animate="saturate"
Animer en boucle
Des animations qui tournent indefiniment pour garder l'oeil accroche. Parfaites pour les CTA, les notifications et les elements decoratifs.
L'element rebondit continuellement de haut en bas. Attire le regard avec un mouvement naturel et ludique.
data-animate-loop="bounce"
L'element grossit et retrecit en rythme, comme un battement de coeur. Effet organique et hypnotisant.
data-animate-loop="pulse"
Double pulsation rapide imitant un battement de coeur. Rythme organique qui cree un sentiment d'urgence.
data-animate-loop="heartbeat"
Elastique & Deformation
L'element s'etire et se compresse comme un elastique. Effet ludique et memorable pour les interactions.
data-animate-loop="rubber"
L'element se deforme en biais comme de la gelee. Skew en X et Y pour un effet organique unique.
data-animate-loop="jello"
L'element oscille avec un mouvement elastique. Plus doux que shake, plus expressif que bounce.
data-animate-loop="wobble"
Secousses & Vibrations
L'element vibre lateralement. Attire l'attention immediatement, ideal pour signaler une erreur.
data-animate-loop="shake"
L'element fait non de la tete avec un leger mouvement 3D. Effet naturel et expressif pour un refus ou une negation.
data-animate-loop="headshake"
Petites rotations rapides alternees comme un frisson. Mouvement subtil mais efficace pour attirer l'oeil.
data-animate-loop="wiggle"
Effets speciaux
L'element se balance comme un pendule accroche par le haut. Mouvement naturel et apaisant avec un ancrage au sommet.
data-animate-loop="swing"
Combinaison de zoom et rotation pour un effet festif. L'element fait une petite danse celebratoire en boucle.
data-animate-loop="tada"
L'element clignote de maniere irreguliere comme une lampe defaillante. Effet neon ou enseigne lumineuse retro.
data-animate-loop="flicker"
Le texte prend vie
Animez chaque mot, ligne ou caractere de vos textes. Le split text combine la puissance des presets avec le stagger pour des revelations progressives.
Chaque mot du texte est anime individuellement avec un stagger. L'effet est naturel et lisible, comme une lecture guidee.
data-animate="mode:rise, splittext:word, stagger:0.1"
Chaque ligne de texte apparait separement avec un decalage vers le haut. Parfait pour les paragraphes ou les listes de features.
data-animate="mode:rise, splittext:line, stagger:0.15"
Chaque lettre arrive individuellement. L'effet le plus spectaculaire pour les titres courts et les acronymes.
data-animate="mode:rise, splittext:true, stagger:0.08"
Split + Flou
Chaque mot sort progressivement d'un flou gaussien. L'effet est doux et cinematique, comme une mise au point progressive.
data-animate="mode:blur, splittext:word, stagger:0.1"
Chaque caractere se materialise depuis un brouillard. Effet de profondeur de champ spectaculaire sur les courts textes.
data-animate="mode:blur, splittext:true, stagger:0.06"
Split + Déformation
Chaque mot entre en scene avec un effet d'inclinaison dynamique. Le skew donne une impression de vitesse et de mouvement.
data-animate="mode:skew, splittext:word, stagger:0.1"
Chaque mot grossit depuis un point minuscule. L'effet de mise a l'echelle progressive cree une hierarchie visuelle naturelle.
data-animate="mode:scale, splittext:word, stagger:0.1"
Chaque lettre entre en zoomant depuis le neant. L'effet pop par caractere ajoute un rythme saccade tres attractif.
data-animate="mode:scale, splittext:true, stagger:0.06"
Split + Fondu & Combos
Chaque mot apparait en fondu successif. L'effet le plus subtil et elegant pour les contenus longs.
data-animate="mode:fade, splittext:word, stagger:0.08"
Les lignes apparaissent une par une en fondu. Ideal pour reveler du contenu de maniere progressive et apaisante.
data-animate="mode:fade, splittext:line, stagger:0.2"
Chaque ligne du texte entre avec un effet de skew dynamique. L'inclinaison donne une impression de mouvement cinematique.
data-animate="mode:skew, splittext:line, stagger:0.15"
Interagir avec intelligence
Au-dela des animations d'entree — des interactions au clic, au scroll, en boucle, et des composants visuels avances.
Interactions supportées (production)
L'animation est en pause et ne se joue qu'au clic sur un bouton declencheur. Parfait pour les interactions utilisateur controlees.
data-animate="mode:rise, trigger:true"
data-trigger="#mon-element" (sur le bouton)
L'animation est liee a la position de scroll — elle avance et recule avec le defilement. Effet parallaxe avance et precis.
data-animate="mode:rise, scrub:true, start:top 80%, end:bottom 20%"
L'element est epingle pendant le defilement, puis se detache une fois l'animation terminee. Ideal pour les sections immersives.
data-animate="mode:fade, scrub:true, pin:true, start:top top, end:bottom top"
L'animation se repete en boucle a l'infini avec un effet yoyo. Parfait pour attirer l'attention sur un element.
data-animate="style_start-y:10, duration:1.5, ease:power1.inOut, scroll:false, loop:true"
Ajoute ou retire une classe CSS quand l'element entre ou sort du viewport. Combine la puissance de GSAP avec vos propres transitions CSS.
data-animate="mode:fade, toggleClass:is-visible"
Declenchez des animations depuis votre propre JavaScript. L'API createDataAnimate() accepte un selecteur et une chaine d'animation.
createDataAnimate(".cible", "mode:rise")
Animations spéciales (Pas encore dans le moteur data-animate)
Un nombre qui s'incremente de 0 a la valeur cible avec GSAP. Effet impressionnant pour les statistiques et chiffres cles.
data-animate="counter" data-target="1250"
Les traits d'un SVG se dessinent progressivement avec stroke-dashoffset. Effet technique et satisfaisant visuellement.
data-animate="svg-draw"
Un element suit un chemin SVG defini. L'animation trace une trajectoire precise et fluide dans l'espace.
data-animate="motion-path"
Elements CSS (CSS pur / hors moteur)
Carte a double face en CSS pur — survolez pour la retourner. Utilise perspective et backface-visibility.
.flipbox { perspective: 600px; }
Bandeau de texte defilant en continu avec CSS keyframes. Classique et efficace pour les logos clients ou actualites.
animation: marqueeScroll 8s linear infinite;
Slider avant/apres pour comparer deux images. L'utilisateur deplace le curseur pour reveler l'avant ou l'apres.
data-compare="slider"
Autres effets (Concepts futurs)
Integrez des animations Lottie (After Effects exportees en JSON). Complexes, legeres et parfaitement fluides.
data-lottie="animation.json"
10110
01101
Pluie de caracteres verts a la Matrix. Utilise un canvas avec des colonnes de texte aleatoire qui descend.
data-effect="matrix"
○●○●
Effet de trame d'impression (halftone) avec des points qui changent de taille. Esthetique pop-art retro.
data-effect="halftone"
Barre de progression ou cercle qui indique la position de scroll sur la page. Feedback visuel utile.
data-scroll-indicator="bar"
Des recettes pretes a l'emploi
Combinez plusieurs animations pour creer des experiences completes. Chaque recette est un point de depart que vous pouvez personnaliser.
Recettes combinatoires (Realisable avec le moteur data-animate)
Grille de cartes qui apparaissent en cascade avec un stagger progressif. Placez l'attribut sur le conteneur parent et les enfants s'animent un par un.
data-animate="mode:rise, stagger:0.15"
(sur le conteneur parent, les enfants directs s'animent)
Hero section avec titre en split-word, sous-titre en blur et CTA en scale. Chaque element a son propre data-animate avec un delay croissant.
<!-- Titre -->
data-animate="mode:blur, splittext:word, stagger:0.08"
<!-- Sous-titre -->
data-animate="mode:fade, delay:0.4s"
<!-- CTA -->
data-animate="mode:scale, delay:0.8s"
Narration au scroll avec des elements qui apparaissent selon la position de lecture. Le scrub lie l'animation au defilement, le pin fixe l'element pendant la duree.
data-animate="mode:fade, scrub:true, pin:true, start:top top, end:bottom top"
Galerie d'images avec des revelations variees. Appliquez mode:wipe ou mode:circle sur le conteneur avec stagger pour un effet cascade magazine.
<!-- Option A : Wipe -->
data-animate="mode:wipe, stagger:0.12"
<!-- Option B : Circle -->
data-animate="mode:circle, stagger:0.12"
Interface dashboard avec compteurs animes, graphiques et cartes qui apparaissent avec un timing orchestre. Le mode rise+stagger fonctionne, mais les compteurs animes necessitent du JS custom non encore integre au moteur.
<!-- Cartes (supporte) -->
data-animate="mode:rise, stagger:0.15"
<!-- Compteur (a venir) -->
data-animate="counter" (pas encore dans le moteur)
Page produit avec image parallax (scrub), details en cascade (stagger) et CTA en boucle. Chaque element utilise une strategie differente du moteur.
<!-- Image parallax -->
data-animate="style_start-y:60, scrub:true"
<!-- Details cascade -->
data-animate="mode:rise, stagger:0.1"
<!-- CTA pulse -->
data-animate="style_start-scale:1, style_end-scale:1.1, duration:0.8, ease:power1.inOut, scroll:false, loop:true"
Le texte se revele mot par mot avec un stagger elegant. Le moteur split le contenu automatiquement — il suffit d'ajouter splittext:word.
data-animate="mode:rise, splittext:word, stagger:0.1"
Enchalnez plusieurs etapes d'animation sur un meme element avec le point-virgule. Chaque segment s'execute apres le precedent, comme une timeline GSAP.
data-animate="style_start-opacity:0, style_start-y:40, style_end-opacity:1, style_end-y:0, duration:0.5; style_end-scale:1.1, duration:0.3; style_end-scale:1, duration:0.2"
L'animation est en pause jusqu'au clic sur un declencheur. Combinez avec n'importe quel mode pour des interactions controlees par l'utilisateur.
<!-- Element cache -->
data-animate="mode:rise, trigger:true" id="panel"
<!-- Bouton -->
data-trigger="#panel"
Animation en boucle infinie pour attirer l'attention. Le mode yoyo cree un va-et-vient fluide. Desactivez le scroll pour que l'animation joue immediatement.
data-animate="style_start-y:0, style_end-y:-8, duration:1, ease:power1.inOut, scroll:false, loop:true"
Activez ou desactivez une animation selon l'appareil. Parfait pour les effets qui sont trop lourds sur mobile ou non pertinents sur desktop.
<!-- Desktop + tablet uniquement -->
data-animate="mode:blur, mobile:false"
<!-- Mobile uniquement -->
data-animate="mode:fade, desktop:false, tablet:false"
Orchestrez l'apparition de plusieurs elements avec des delais croissants. Chaque element a son propre delay pour creer un effet de cascade manuel.
<!-- Element 1 -->
data-animate="mode:rise"
<!-- Element 2 -->
data-animate="mode:rise, delay:0.15s"
<!-- Element 3 -->
data-animate="mode:rise, delay:0.3s"
Galerie interactive
Choisissez une animation et voyez-la appliquee a toute une galerie d'images en un clic.