Comment redémarrer une animation à chaque fois que vous faites défiler un élément avec Divi et GSAP

Publié: 2021-06-28

Lorsqu'il s'agit d'animer des éléments sur votre page, vous souhaiterez probablement activer l'animation d'un élément une fois qu'il entre dans la fenêtre. Avec les paramètres d'animation intégrés de Divi, dès que cet élément est apparu et a été animé, il restera statique jusqu'à ce que vous rechargez la page entière. Dans certains cas, vous pouvez rechercher une approche plus cohérente, où votre animation redémarre à chaque entrée de fenêtre. Cela vous aidera à rationaliser l'expérience que les visiteurs ont sur votre site Web. Dans ce tutoriel, nous allons vous montrer exactement comment faire cela en utilisant Divi, GSAP et ScrollTrigger pour GSAP. Une fois que vous aurez compris l'approche, vous pourrez l'appliquer à n'importe quel élément de votre page. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

relancer l'animation

Mobile

relancer l'animation

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers
Télécharger gratuitement

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

1. Créer une conception de section

Ajouter une section d'espace réservé

Avant de commencer à créer le design, nous allons ajouter deux sections d'espace réservé à la page sur laquelle nous travaillons. De cette façon, nous pouvons voir l'expérience de défilement une fois la conception terminée. Alternativement, vous pouvez utiliser le design à l'intérieur d'une page que vous avez déjà configurée. Ajouter une nouvelle section régulière.

relancer l'animation

Dimensionnement

Modifiez la hauteur de la section comme suit :

  • Hauteur: 100vh

relancer l'animation

Cloner la section d'espace réservé

Ensuite, clonez la section une fois.

relancer l'animation

Ajouter une nouvelle section entre les sections d'espace réservé

Pour créer le design que vous avez pu voir dans l'aperçu de cet article, nous ajouterons une nouvelle section régulière entre les sections d'espace réservé.

relancer l'animation

relancer l'animation

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à la section en utilisant la structure de colonnes suivante :

relancer l'animation

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne, accédez à l'onglet Conception et modifiez les paramètres de dimensionnement comme suit :

  • Utiliser une largeur de gouttière personnalisée : Oui
  • Largeur de gouttière : 2
  • Largeur: 90%
  • Largeur maximale : 2080px

relancer l'animation

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu

Ensuite, ajoutez un premier module de texte à la colonne et incluez du contenu de votre choix.

relancer l'animation

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte en conséquence :

  • Police du texte : Montserrat
  • Poids de la police de texte : lourd
  • Style de police de texte : majuscule
  • Couleur du texte : #f9f9f9
  • Taille du texte:
    • Bureau : 150px
    • Tablette et téléphone : 11vw
  • Hauteur de la ligne de texte : 1,1 em
  • Alignement du texte : Centre

relancer l'animation

Ajouter le module de texte #2 à la colonne

Ajouter du contenu H2

Ajoutez un autre module de texte sous le précédent et incluez du contenu H2.

relancer l'animation

Paramètres de texte H2

Stylisez le texte H2 comme suit :

  • Police de la rubrique 2 : Montserrat
  • En-tête 2 Alignement du texte : Centre
  • Titre 2 Taille du texte :
    • Bureau : 80px
    • Tablette et téléphone : 10vw

relancer l'animation

Dimensionnement

Ajoutez également une largeur de 100%.

  • Largeur : 100 %

relancer l'animation

Position

Et repositionnez l'ensemble du module dans l'onglet avancé.

  • Position : Absolu
  • Lieu : Centre

relancer l'animation

Ajouter la ligne n° 2

Structure des colonnes

Ajoutez une autre ligne sous la précédente, en utilisant la structure de colonnes suivante :

relancer l'animation

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajustez les paramètres de dimensionnement comme suit :

  • Utiliser une largeur de gouttière personnalisée : Oui
  • Largeur de gouttière : 2
  • Largeur: 90%
  • Largeur maximale : 2080px

relancer l'animation

Paramètres de la colonne 1

Ensuite, ouvrez les paramètres de la colonne 1.

relancer l'animation

Image de fond

Téléchargez une image de fond de votre choix.

  • Taille de l'image d'arrière-plan : couverture
  • Position de l'image d'arrière-plan : Centre

relancer l'animation

Espacement

Modifiez ensuite les paramètres d'espacement de la colonne.

  • Rembourrage supérieur : 100 pixels
  • Rembourrage inférieur :
    • Bureau : 400px
    • Tablette et téléphone : 200 px
  • Rembourrage gauche : 5,5 %
  • Rembourrage droit : 5,5 %

relancer l'animation

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu H4

Ensuite, ajoutez un module de texte à la colonne 1 avec du contenu H4.

relancer l'animation

Paramètres de texte H4

Stylisez le texte H4 en conséquence :

  • Titre 4 Police : Lato
  • Titre 4 Poids de la police : lourd
  • Titre 4 Style de police : majuscule
  • Titre 4 Taille du texte : 13px
  • En-tête 4 Espacement des lettres : 2px

relancer l'animation

Ajouter le module de texte n° 2 à la colonne 1

Ajouter du contenu H3

Ajoutez un autre module de texte en dessous du précédent, en utilisant du contenu H3.

relancer l'animation

Paramètres de texte H3

Modifiez les paramètres de texte H3 en conséquence :

  • Police de la rubrique 3 : Montserrat
  • Titre 3 Taille du texte : 36px
  • En-tête 3 Espacement des lettres : 1px
  • Rubrique 3 Hauteur de ligne : 1,2 em

relancer l'animation

Ajouter le module de texte n° 3 à la colonne 1

Ajouter un contenu de description

Ajoutez le dernier module de texte contenant du contenu de description de votre choix.

relancer l'animation

Paramètres de texte

Modifiez les paramètres de texte du module comme suit :

  • Police du texte : Lato
  • Couleur du texte : #4c4c4c
  • Espacement des lettres du texte : 0.5px
  • Hauteur de la ligne de texte : 2 em

relancer l'animation

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Le dernier module dont nous avons besoin dans cette colonne est un module de bouton. Ajoutez une copie de votre choix.

relancer l'animation

Paramètres des boutons

Stylisez le bouton dans l'onglet Conception.

  • Utiliser des styles personnalisés pour le bouton : Oui
  • Taille du texte du bouton : 14 px
  • Couleur du texte du bouton : #ffffff
  • Couleur d'arrière-plan du bouton : #000000
  • Largeur de la bordure du bouton : 0px

relancer l'animation

  • Police des boutons : Lato
  • Poids de la police du bouton : gras
  • Style de police des boutons : majuscules

relancer l'animation

Réutiliser la colonne 1

Supprimer les colonnes 2 et 3

Une fois que vous avez terminé la colonne 1 et tous les modules qu'elle contient, vous pouvez supprimer les deux colonnes restantes de la ligne.

relancer l'animation

Cloner la colonne 1 deux fois

Et réutilisez la colonne 1 en la clonant deux fois.

relancer l'animation

Modifier les images d'arrière-plan des colonnes en double

Assurez-vous de modifier l'image d'arrière-plan de chaque colonne en double.

relancer l'animation

Modifier le contenu des colonnes en double

Avec le contenu du module.

relancer l'animation

Ajouter les paramètres Transformer la traduction aux paramètres de la colonne 2

Ensuite, ouvrez les paramètres de la colonne 2 et accédez à l'onglet conception. Une fois là-bas, ajoutez des valeurs de conversion de transformation sur différentes tailles d'écran pour terminer la conception.

relancer l'animation

  • La gauche:
    • Bureau : 50px
    • Tablette et téléphone : 0px

relancer l'animation

2. Appliquer la technique d'animation de redémarrage à la conception

Ajouter la classe CSS à la ligne n°2

Maintenant que notre conception est en place, nous pouvons nous concentrer sur la technique d'animation de redémarrage. Nous allons cibler plusieurs modules à la fois pour cela. Tout d'abord, ouvrez les paramètres de la deuxième ligne et appliquez la classe CSS suivante :

  • Classe CSS : trigger-animation-row

relancer l'animation

Ajouter le module de code à la ligne n° 1

La classe CSS que nous avons ajoutée à l'étape précédente de ce didacticiel nous aidera à cibler tous les modules à l'intérieur de cette ligne à la fois. Pour créer l'animation de redémarrage, nous utilisons du code JQuery, la bibliothèque JavaScript GSAP et la bibliothèque ScrollTrigger pour GSAP. Pour ajouter ce code, nous allons insérer un nouveau module de code sous le deuxième module de texte de la ligne 1.

relancer l'animation

Ajouter des bibliothèques GSAP et ScrollTrigger

Assurez-vous d'ajouter les bibliothèques GSAP et ScrollTrigger dans les nouvelles balises de script.

  • https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

relancer l'animation

Ajouter de nouvelles balises de script

Ensuite, ajoutez de nouvelles balises de script sous les balises de script de la bibliothèque.

relancer l'animation

Ajouter la fonction GSAP + ScrollTrigger

À l'intérieur des nouvelles balises de script, nous allons copier-coller les lignes de code JQuery suivantes : 

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

Ce code ciblera tous les modules de ligne à la fois et redémarrera l'animation dès qu'un visiteur entrera à nouveau dans la fenêtre. L'animation, dans ce cas, est assez simple et minimale. Cependant, avec GSAP et ScrollTrigger, vous pouvez créer n'importe quel type d'animation, donc cela vaut vraiment la peine de s'y intéresser !

relancer l'animation

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

relancer l'animation

Mobile

relancer l'animation

Dernières pensées

Dans cet article, nous vous avons montré comment redémarrer une animation dès que l'élément entre dans la fenêtre. Cette approche vous aide à créer une expérience cohérente, quelle que soit la façon dont vos visiteurs défilent. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.