En cliquant sur "Accepter tous les cookies", vous acceptez que des cookies soient stockés sur votre appareil afin d'améliorer la navigation sur le site, d'analyser l'utilisation du site et de contribuer à nos efforts de marketing. Consultez notre politique de confidentialité pour plus d'informations.

Guide complet : Spline x Webflow

Visuel de blog 3D

Annoncée lors de la Webflow Conf 2023 l'intégration de Spline dans Webflow   la fusion prometteuse entre la modélisation 3D intuitive de Spline et la puissance de Webflow est une véritable aubaine pour les designers qui cherchent à donner vie à leurs sites web avec une touche de modernité et d'interactivité.

Révélée à la Webflow Conf 2023, l'intégration de Spline dans Webflow marque une alliance prometteuse. Cette fusion combine l'intuitivité de la modélisation 3D de Spline avec la robustesse de Webflow, offrant aux designers une opportunité exceptionnelle d'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 utilisateur épurée et ses outils de modélisation 3D, s'intègre désormais de manière transparente dans Webflow. Cette intégration vous permet d'insérer des éléments 3D interactifs avec aisance dans vos projets de création de site web en éliminant le besoin de codage complexe ou de plugins additionnels. En bref, plus besoin de se prendre la tête !

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 en importer un déjà existant.

2. Préparation de votre fichier pour Webflow

Une bonne préparation de votre fichier Spline est cruciale pour une intégration réussie dans Webflow :

Nommez avec précision

Ce sont les fondations de toute réalisation : Assurez-vous que chaque élément de votre création 3D est correctement nommé. Cela peut sembler élémentaire, mais c'est essentiel pour éviter toute confusion plus tard.

Activez l'auto-zoom

Dans le panneau de droite de Spline, sélectionnez votre cadre et activez l'option 'auto-zoom'. Cela garantit que votre élément s'adapte harmonieusement à tous les appareils et assure à votre utilisateur une expérience 3D immersive de qualité.

Panneau Webflow d'auto zoom
Panneau d'auto zoom

Exportez intelligemment

Cliquez sur 'export', puis dans 'play settings', choisissez 'hide background' pour obtenir un élément avec un fond transparent. Désactivez aussi les options comme 'orbit', 'pan', 'zoom' et 'soft orbit' pour un contrôle plus précis.

Panneau Webflow de play setting
Panneau de play settings

Sauvegardez les changements

N'oubliez pas de sauvegarder les 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 : La 3D est un véritable game changer mais elle peut affecter les performances de votre site web. Heureusement, Spline vous permet de Garde un œil sur les performances via l'onglet 'Overview' > 'viewer' > 'performance > run test'. Vous obtiendrez un audit des performances et des conseils pour les optimiser.

Panneau Webflow d'overview
Panneau d'overview

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. N'oubliez pas d'attribuer une classe à votre scène pour un meilleur contrôle dans votre site web.

Panneau Webflow sélection Spline
Panneau sélection Spline

Animez selon vos envies

Choisissez sur quelle action votre élément 3D va s’animer en naviguant dans 'element trigger' qui se trouve dans le panneau latéral droit. Vous y trouverez une multitude d'options basées sur les interactions des utilisateurs :

Panneau Webflow d'animation
Panneau d'animation

Personnalisez l'animation

Créez une nouvelle animation et donnez-lui un nom qui résonne avec son action.

Intégrez et animez

Sélectionnez votre élément Spline et cliquez sur le + de 'scroll action' afin de choisir ‘integration’ > ‘Spline’.

Vous pouvez alors aller dans la catégorie 'object' afin de choisir l'élément à animer.

Catégorie object
Catégorie object

Ajustez et testez

Définissez l'état par défaut de votre élément et expérimentez différents états et animations. L'expérimentation est la clé. N'hésitez pas à tester différentes animations pour trouver celle qui convient parfaitement à votre site.

Ligne d'animation
Ligne d'animation

Astuce : Utilisez l'option 'live preview is on' pour voir vos modifications en temps réel.

Turn on live preview
Turn on live preview

Faites un tour sur le site de Cohort si vous souhaitez un aperçu de ce que cela peut donner (made in Ouiflow évidemment 😉)

Site de Cohort avec animations Spline
Cohort

En bref

L'intégration de Spline dans Webflow est plus qu'une simple mise à jour technique ; c'est une invitation à repenser la conception web. N’hésitez pas à combiner l’action de votre élément 3D avec le scroll, le hover d’un bouton ou encore un changement de page. Il y a un tas de possibilités qui vous permettra de rendre votre site web mémorable ! C'est une opportunité pour les designers de se démarquer, d'innover et de créer des sites web qui ne sont pas seulement fonctionnels, mais véritablement captivants. Chez Ouiflow, nous sommes impatients d’utiliser cette nouvelle association afin de rendre vos sites web encore plus époustouflant et de repousser les limites de la créativité.