1. Origine
Rive (anciennement 2Dimensions) a été fondé en 2017 par Guido Rosso et Luigi Rosso. La plateforme est née d'un constat : Lottie et CSS animations ne permettaient pas de créer des animations véritablement interactives et pilotables par état. Rive a réinventé le format d'animation vectorielle pour le web et le mobile avec un moteur d'états (State Machine) qui permet de répondre aux interactions utilisateur en temps réel. Rebrandé en Rive en 2021, l'outil est aujourd'hui adopté par des équipes produit à travers le monde, dont Spotify, Duolingo, Disney, LinkedIn et Google. La plateforme propulse des produits qui touchent plus de 2 milliards d'utilisateurs dans le monde.
2. Utilité
Pour un studio Webflow, Rive ouvre une catégorie d'expériences inaccessibles avec GSAP ou les interactions Webflow : des boutons qui ont des animations d'état complexes (idle, hover, pressed, loading, success), des icônes qui s'animent en fonction du contexte, des illustrations interactives où l'utilisateur contrôle l'animation via le curseur ou le scroll, des personnages qui réagissent aux actions. Ces expériences différencient radicalement un site Webflow des concurrents.
3. Fonctionnalités
Rive couvre l'ensemble du cycle de production d'une animation interactive, de la création dans l'éditeur jusqu'au déploiement en production, sur toutes les plateformes.
- Éditeur vectoriel et timeline : création de formes, groupes, bones et animations en keyframes directement dans le navigateur ou l'app desktop (Mac/Windows)
- State Machine : logique visuelle d'états et de transitions, pilotée par des inputs (Boolean, Number, Trigger) connectables à JavaScript (hover, clic, scroll, données dynamiques)
- Data Binding : liaison des propriétés de l'animation à des données externes en temps réel (texte, couleurs, valeurs numériques)
- Collaboration en temps réel : plusieurs designers travaillent simultanément dans le même fichier, comme dans Figma
- Export .riv : fichier ultra-léger (jusqu'à 90 % plus compact qu'un GIF ou une vidéo équivalente)
- Runtimes open-source : disponibles pour Web, React, iOS, Android, Flutter, Unity, Unreal, sous licence MIT
- Marketplace : bibliothèque de fichiers Rive partagés par la communauté, remixables librement
4. Cas concrets
Un studio intègre un logo animé Rive dans le header d'un site : au repos il est statique, au survol il se déploie en une animation fluide, et au clic il déclenche une transition vers la page d'accueil. L'état est géré entièrement par la State Machine Rive, sans une ligne de JavaScript supplémentaire.
Pour la page d'accueil d'une startup tech, le studio crée une illustration isométrique Rive qui réagit au scroll : les éléments s'assemblent progressivement à mesure que l'utilisateur descend dans la page, créant une narration visuelle interactive particulièrement difficile à reproduire avec des animations CSS ou GSAP seules.
5. Prix
L'éditeur Rive est gratuit. La création, l'animation et le travail en équipe dans l'éditeur ne nécessitent pas d'abonnement. L'export des fichiers .riv vers la production requiert un plan payant : depuis octobre 2025, le plan Cadet (à partir de 9 $/mois en annuel) débloque les exports illimités. Les runtimes qui lisent les fichiers .riv sur le web, iOS, Android et les moteurs de jeu sont open-source sous licence MIT, sans coût récurrent ni dépendance commerciale côté déploiement.
→ Tarifs à jour : rive.app/pricing
6. Questions fréquentes
Quelle est la différence entre Rive et Lottie ?
Lottie exporte des animations After Effects en JSON : les animations sont linéaires et non-interactives. Rive est conçu nativement pour l'interactivité avec sa State Machine : un même fichier peut avoir des dizaines d'états, réagir aux clics, au scroll ou à des données en temps réel. Pour des animations de chargement simples, Lottie reste plus accessible. Pour tout ce qui est interactif ou piloté par des états, Rive n'a pas d'équivalent direct.
Rive impacte-t-il les performances d'un site ?
Le runtime web Rive est léger (environ 40 à 100 Ko selon le renderer) et les animations tournent en WebGL ou Canvas 2D avec un rendu GPU-accéléré. Les fichiers .riv sont jusqu'à 90 % plus légers que des GIFs ou des vidéos équivalentes. L'impact sur les Core Web Vitals est minimal si les animations sont chargées après le LCP.
Faut-il être développeur pour intégrer Rive dans Webflow ?
Une compréhension basique de JavaScript est utile pour les intégrations interactives (connecter les inputs de la State Machine au scroll ou à des événements). Pour une animation qui joue en boucle ou réagit au hover, l'intégration se fait avec un snippet minimal. La documentation Rive fournit des exemples copy-paste pour les cas d'usage courants.
