initClub · 1Úre Communauté Webflow Francophone

Updated last week

Animated E-card Hero Section: Exploring the Best Approach

Hello la commu 👋

Je travaille sur la refonte d’un site pour un client qui propose des e-cards NFC (Apple Wallet, Google Wallet, etc.).
Je souhaite créer un hero hyper impactant avec une belle mise en scÚne animée de la carte : effets de mouvement, rotation 2/3D, interactions au scroll

Le but est d’avoir quelque chose de fluide, immersif et performant.

Je cherche Ă  explore toutes les possibilitĂ© et je me demande quelle est la meilleure approche entre les animations natives Webflow, Lottie (via After Effects), ou des outils comme Jitter, Rive ou Spline ? Si vous avez des retours d’expĂ©rience, des conseils ou des exemples de projets, je suis preneur.
Des personnes ici bien calé en animations ?

Merci d’avance pour vos idĂ©es 🙏

S
T
J
3 comments

Hello,
De mon xp, Lottie (Blender + AE) est nickel pour animer un objet (3D précalculée en 2D) sur un axe, genre scroll.
Par contre, si tu veux suivre le curseur ou une vraie interaction 3D, Spline ou WebGL (ex. Three.js) sera mieux, mĂȘme si le rendu visuel peut ĂȘtre moins dĂ©taillĂ© qu’avec Lottie.
Rive et Jitter, pas encore testé.
Je laisse @Thomas CarrĂ© te donner des exemples 🙂

Le meilleur restera Threejs mais franchement Spline tu te fera moins chier
 aprĂšs y’a celui lĂ  qui est sortit y’a pas longtemps qui est vraiment gĂ©nial en anim et super clean et c’est full lottie

https://overflow.sui.io/

Merci @Sylvain @Thomas CarrĂ© pour vos retours 😉 Le besoin en animations n’est pas encore cadrĂ© et dĂ©fini donc je vais voir avec le client pour plus d’info

Add a reply
Sign up and join the conversation on Slack