initClub
Log in

initClub · 1ère Communauté Webflow Francophone

Updated 3 months ago

Launching webflow animations with javascript

At a glance
FFlorent Peyrard
·

Hello, savez-vous s'il est possible de lancer les animations Webflow avec du JS ? J'ai un cas d'usage particulier où ce serait très utile (une page de podcasts : quand on clique sur le bouton play d'un podcast, j'ai besoin que le bouton du podcast précédemment joué change d'état visuellement).

H
F
4 comments
HHubert QUETEL

Hello. Je crois que tu dois pouvoir faire ça avec une animation au clic. Que tu peux donc déclencher en .js

FFlorent Peyrard

Merci pour ta réponse ! Dans ce que tu décris, l'animation serait en js ou dans le designer Webflow ?

HHubert QUETEL

Réponse de ChatGPT :

Pour déclencher une animation Webflow via JavaScript, vous pouvez utiliser l'approche suivante :

  1. Créer une interaction dans Webflow : Dans l'éditeur Webflow, définissez une interaction basée sur un déclencheur spécifique, tel qu'un clic ou le survol de la souris, et associez-la à l'élément souhaité.
  2. Ajouter un élément déclencheur invisible : Insérez un élément, comme un bouton, avec une taille de 0 px par 0 px ou une opacité de 0 %, et attribuez-lui l'interaction créée précédemment.
  3. Déclencher l'interaction via JavaScript : Utilisez JavaScript pour simuler un événement sur cet élément invisible, ce qui activera l'animation associée.
  4. Voici un exemple de code :

// Sélectionner l'élément déclencheur invisible
var element = document.querySelector('.votre-classe-declencheur');

// Simuler un clic sur cet élément
element.click();

Remplacez .votre-classe-declencheur par la classe ou l'ID de votre élément déclencheur invisible.

Tu vois l'idée ?

FFlorent Peyrard

Parfait, c'est limpide et ça va faire le job, merci beaucoup Hubert et ChatGPT !

Add a reply
Sign up and join the conversation on Slack