Comment désactiver une animation trop lourde pour le mobile

Points clés :

Identifier les animations qui ralentissent le chargement sur mobile.
Utiliser les paramètres de visibilité de Webflow pour les désactiver.
Conserver un design fluide et esthétique sur tous les écrans.

Les animations sont très efficaces pour donner vie à votre site hôtelier et renforcer l’expérience utilisateur. Mais sur mobile, certaines peuvent devenir trop lourdes et ralentir l’affichage, voire provoquer des saccades. Voici comment désactiver facilement ces effets dans Webflow tout en conservant un rendu professionnel.

Identifier les animations problématiques

Avant toute modification, testez votre site sur mobile :

Ouvrez votre site publié depuis un smartphone.
Repérez les éléments animés qui chargent lentement (bannières, transitions, effets de scroll).
💡 Astuce : utilisez Lighthouse ou Chrome DevTools (Audits → Performance) pour repérer les animations trop gourmandes en ressources.

Désactiver une animation dans Webflow

Dans Webflow Designer, sélectionnez l’élément animé :

Ouvrez l’onglet Interactions (éclair).
Repérez l’animation concernée (ex. “Fade In”, “Slide Up”, “While Scrolling”).
Cliquez sur l’icône d’engrenage à côté de l’interaction.
Cochez Limit to Device puis désactivez-la pour les vues Tablet et Mobile.

Ainsi, l’animation restera active sur ordinateur, mais sera automatiquement désactivée sur les appareils mobiles.

Alternative : masquer un élément animé sur mobile

Si une section entière repose sur une animation trop lourde :

Sélectionnez la section.
Dans l’onglet Style, ouvrez Display Settings.
Cochez Hide on Mobile Landscape et Hide on Mobile Portrait.
💡 Vous pouvez ensuite créer une version simplifiée de cette section (sans animation) uniquement visible sur mobile.

Réduire la complexité d’une animation

Si vous souhaitez conserver un effet visuel léger :

Diminuez le nombre d’éléments animés simultanément.
Réduisez la durée (ex. 0.3s au lieu de 1s).
Supprimez les effets de flou, d’ombre ou de rotation 3D, plus gourmands sur mobile.
💡 Optez pour des transitions simples comme un Fade ou un Move In.

Bonnes pratiques pour les sites hôteliers

Priorisez la vitesse de chargement sur mobile : elle influence directement le référencement et les réservations.
Évitez les animations sur les pages critiques (réservation, contact, menu).
Préférez des images statiques élégantes et des micro-interactions légères.

Conclusion

Désactiver une animation trop lourde sur mobile dans Webflow est un geste simple mais essentiel pour garantir la fluidité et la rapidité de votre site hôtelier. En adaptant vos effets visuels selon les appareils, vous améliorez à la fois l’expérience utilisateur et la performance SEO de votre site.