Guide / Article

Transitions de page sans faille dans le Webflow avec Lottie

IVG
October 30, 2020
Transitions de page sans faille dans le Webflow avec Lottie

Bonjour, chers Webflowers !

J'aimerais partager une fonctionnalité géniale que nous pouvons utiliser, maintenant que Webflow a sorti l'intégration Lottie.

Tout d'abord, j'aimerais faire appel au personnel de Webflow, qui est très serviable et réceptif (@sabane & @tai) et aux @Jeandcc qui ont tous contribué à ce que cela devienne une réalité.

Je pense que cela va rendre tout un tas de gens heureux (je l'espère) - un moyen facile d'intégrer des transitions animées pleine page en utilisant la fonctionnalité de loterie intégrée de Webflow et en utilisant smoothstate.js - une bibliothèque permettant des transitions de page sans défaut (donc pas de scintillement lors du changement de page).

J'ai utilisé un modèle gratuit de Webflow et j'y ai intégré les transitions et smoothstate.js.

Voilà ce que tu fais :

Partie I - Configurer les pages pour travailler avec smoothstate.js :

  • Créer un div permet de l'appeler Conteneur de contenu et de le placer tout en haut du corps. Donnez-lui une largeur de 100vw et un ID de "main".
  • Placez les éléments que vous avez sur la page dans le Conteneur de contenu dans le même ordre qu'elle est (rien ne doit changer sur votre page)
  • Répétez les étapes i. et ii. sur chaque page où vous voulez avoir une transition (et utilisez smoothstate.js)

Partie II - Préparer les animations Lottie

  • En supposant que vous avez déjà téléchargé vos json de loterie avec une animation de transition plein écran, créez un div, appelons-le "Transition-Container", donnez-lui : hauteur = 0px et largeur = 0px, et placez la ou les loteries dedans et donnez aux loteries une classe de "transition" (ou si vous en utilisez deux séparées, utilisez deux classes séparées - "transition-onLoad" et "transition-onExit" - ce qui facilitera les choses plus tard lorsque vous aurez besoin de faire les animations IX2)
  • L'animation que vous avez - sera mise à l'échelle et restera dans le même rapport d'aspect qu'elle a été créée, donc pour la faire passer en plein écran (quel que soit le rapport d'aspect, allez dans les Paramètres de l'animation Lottie (l'icône de l'engrenage dans le Designer) et ajoutez le "Personnalisé" suivant
  • attribut : Nom données-préservation-aspect-ratio Valeur aucune
  • Régler le positionnement suivant sur "transition" (ou le cas échéant transition-onLoad et transition-onExit) : affichage = caché ; largeur = 100vw ; hauteur = 100vh ; position = fixe ; z-index = 9999 (ou la hauteur que vous souhaitez tant qu'elle est au-dessus de tout)

Partie III - Préparer les boutons cachés

  • Créez deux divs - appelez-les button-page-load et button-page-exit donnez leur hauteur = 0px et largeur = 0px
  • Pour chacun des boutons, vous devez faire une animation IX2. Ici tout dépend si vous allez utiliser (i) 1 animation de loterie qui va de 0% à 100 % et ensuite votre inverse à 100%-0% ou (ii) si vous allez utiliser 2 animations qui vont toutes les deux de 0% à 100%.
Оption (i) :
  • faites votre animation onLoad comme suit -
    * animation de loterie - définie à 100% ; définissez l'état
    initial * hide/show - définie à display=block ; définie à "état initial"
    * animation de loterie - définie à 100% et choisissez votre durée (mais souvenez-vous en - vous en aurez besoin plus tard)
    * hide/show - définie à display=none
  • faites votre animation onExit comme suit -
    * hide/show - défini pour display=block ; NE PAS le définir comme "état initial"
    * animation de loterie - défini à 0% et choisissez votre durée
  • -NB Assurez-vous que vous affectez "classe" et "tous les éléments avec cette classe".
  • L'option (ii) impliquerait un peu plus
  • (mais pas de beaucoup)
  • faites votre animation onLoad comme suit :
    * hide/show - set to display=block ; set as "initial state"
    * lottie animation - set to 100% and chosen your duration (but remember it - you will need it later)
    * hide/show - set to display=none
    * lottie animation - set to 0% and 0 duration (to return it to the initial state for next run
  • Faites votre animation onExit de la même manière
    * hide/show - set to display=block ; set as "initial state"
    * lottie animation - set to 100% and chosen your duration (but remember it - you will need it later)
    * hide/show - set to display=none
    * lottie animation - set to 0% and 0 duration (to return it to the initial state for next run
  • *NB Assurez-vous que vous affectez "class" et "all elements with this class"
  • assigner la bonne animation au bon bouton
  • - qui se passe d'explication, mais je ne peux pas vous dire combien de fois j'ai sélectionné la mauvaise animation pour le mauvais bouton
  • sélectionner le conteneur de transition et le transformer en symbole - le rendra plus facile à reproduire sur chaque page que vous avez.
  • Reproduisez la même structure sur chaque page, comme vous l'avez fait dans la première partie - votre structure finale devrait être la : Symbole du conteneur de transition et, en dessous, conteneur de contenu avec les éléments de votre page.

Partie - IV Définir le code personnalisé - la dernière partie et la plus facile !

  • Allez dans les paramètres "code personnalisé" de vos projets et ajoutez le code suivant dans la zone "Code de bas de page" :



   $(function() {
       $('#main').smoothState({
         onStart: {
           duration: 2400,
           render:function($currentTarget, $container)  {$(".button-page-exit").click()},
         },
         onAfter: function($container, $newContent) {$(".button-page-load").click(); Webflow.ready()},
       });
     });
//  $(".button-page-load").click()  //  if you want the "onLoad" transition to run on first load uncomment this line
 
  • Rappelez-vous que j'ai mentionné que vous aurez besoin de la durée de votre animation ? Utilisez-le (en millisecondes - 1sec=1000msec) et ajoutez-le au code à l'endroit approprié (durée : XXXX,).

Publiez et vous avez terminé ! Vous pouvez aller à votre page publiée et profiter de votre lottie pleine page animée et des transitions de page lisses comme du beurre !

Voici un lien vers la page de la démo 7 que j'ai faite

IVG
October 30, 2020

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.