Annoncée lors de la Webflow Conf 2023, l’intégration de Spline dans Webflow réunit la modélisation 3D intuitive de Spline et la puissance de Webflow. Pour les designers qui veulent donner à leurs sites web une touche moderne et interactive, c’est une très bonne nouvelle.
Concrètement, cette alliance Spline Webflow combine la simplicité de la modélisation 3D de Spline avec la robustesse de Webflow. Les designers peuvent ainsi enrichir leurs sites web d’une dimension moderne et interactive.
Qu’est-ce que l’intégration de Spline dans Webflow ?
Spline, avec son interface épurée et ses outils de modélisation 3D, s’intègre désormais directement dans Webflow. Vous pouvez insérer facilement des éléments 3D interactifs dans vos projets de site web, sans code complexe ni plugin supplémentaire. Bref, plus besoin de vous compliquer la vie.
Comment intégrer Spline dans vos projets Webflow ? Le guide étape par étape
1. Commencez avec Spline
Inscrivez-vous ou connectez-vous sur Spline et créez votre élément 3D. Vous pouvez aussi importer un élément existant.
2. Préparation de votre fichier pour Webflow
Une intégration réussie dans Webflow commence par une bonne préparation de votre fichier Spline.
Nommez avec précision
C’est la base de toute réalisation. Vérifiez que chaque élément de votre création 3D porte un nom précis. Cela peut sembler élémentaire, mais vous éviterez bien des confusions par la suite.
Activez l’auto-zoom
Dans le panneau de droite de Spline, sélectionnez votre cadre et activez l’option Auto-zoom. Votre élément s’adapte alors à tous les appareils et votre utilisateur profite d’une expérience 3D immersive de qualité.
Exportez intelligemment
Cliquez sur Export, puis dans Play settings, choisissez Hide background pour obtenir un élément sur fond transparent. Désactivez aussi les options Orbit, Pan, Zoom et Soft orbit pour un contrôle plus précis.
Sauvegardez les changements
Pensez à sauvegarder vos changements pour conserver la configuration de votre élément.
Copiez le lien de votre élément
Dans l’onglet Overview, copiez le lien de votre élément 3D pour l’utiliser dans Webflow.
Attention aux performances. La 3D change beaucoup de choses, mais elle peut ralentir votre site web. Spline vous permet heureusement de surveiller les performances via Overview > Viewer > Performance > Run test. Vous obtenez un audit des performances et des conseils pour les améliorer.
3. Intégration dans Webflow
Ajoutez votre élément 3D
Ouvrez Webflow, glissez l’élément Spline Scene dans votre page et collez-y le lien de votre élément. Pensez à attribuer une classe à votre scène pour mieux la contrôler dans votre site web.
Animez selon vos envies
Choisissez l’action qui déclenchera l’animation de votre élément 3D dans Element trigger, dans le panneau latéral droit. Vous y trouverez de nombreuses options basées sur les interactions des utilisateurs.
Personnalisez l’animation
Créez une nouvelle animation et donnez-lui un nom qui décrit clairement son action.
Intégrez et animez
Sélectionnez votre élément Spline et cliquez sur le + de Scroll action, puis choisissez Integration > Spline.
Allez ensuite dans la catégorie Object pour choisir l’élément à animer.
Ajustez et testez
Définissez l’état par défaut de votre élément, puis essayez différents états et animations. Testez plusieurs animations pour trouver celle qui convient le mieux à votre site.
Notre astuce. Activez l’option Live preview is on pour voir vos modifications en temps réel.
Pour avoir un aperçu du résultat, faites un tour sur le site de Cohort, réalisé par Ouiflow.
En bref
L’intégration de Spline dans Webflow dépasse la simple mise à jour technique. Elle invite à repenser la conception web. Combinez l’action de votre élément 3D avec le scroll, le survol d’un bouton ou un changement de page. Les possibilités sont nombreuses pour rendre votre site web mémorable. Les designers ont là une occasion de se démarquer, d’innover et de créer des sites web à la fois fonctionnels et captivants. Chez Ouiflow, nous avons hâte d’utiliser cette association pour rendre vos sites web encore plus marquants et repousser les limites de la créativité.