Slider Revolution Lottie AddOn

Slider Revolution Lottie AddOn : Guide Complet

Dans cet article, nous allons plonger dans l’univers du Slider Revolution Lottie AddOn, un outil puissant qui permet d’ajouter des animations Lottie de haute qualité à vos modules. Ces animations sont idéales pour rendre vos contenus web plus dynamiques et attrayants, tout en étant légères et efficaces.

Qu’est-ce que le Slider Revolution Lottie AddOn ?

Le Slider Revolution Lottie AddOn est une extension de Slider Revolution, un outil reconnu pour la création de contenu web captivant. Le plugin a évolué au fil des ans, et grâce à ses différentes options et addons, il offre une flexibilité sans précédent dans la création d’animations et d’effets visuels impressionnants. Le Lottie AddOn, en particulier, facilite l’intégration d’animations Lottie, qui sont des fichiers d’animation JSON vectorielle. Ces fichiers sont super légers et peuvent être redimensionnés à l’infini sans perdre en qualité, ce qui en fait un choix parfait pour le web.

Les Fichiers d’Animation Lottie

Avant de plonger profondément dans l’utilisation du Slider Revolution Lottie AddOn, il est essentiel de comprendre ce que sont les fichiers Lottie. Les Lottie files sont, en quelque sorte, des animations pré-packagées qui peuvent être facilement insérées dans vos modules Slider Revolution. Contrairement aux vidéos classiques qui peuvent être lourdes et de grande taille, un fichier Lottie se caractérise par son efficacité : il s’agit d’une animation vectorielle qui prend peu de place et qui peut être intégrée sans sacrifier la qualité visuelle.

Comment Installer le Lottie AddOn

Installer le Lottie AddOn est un processus relativement simple. Connectez-vous à l’interface principale de Slider Revolution et cherchez le bouton “AddOns”. En cliquant dessus, une boîte de dialogue va apparaître, présentant les différentes extensions disponibles. Localisez le lot de Lottie et cliquez dessus pour afficher les détails d’installation.

1. Installation : Cliquez sur le bouton “Install Add-On”. Le téléchargement et l’installation se feront automatiquement.
2. Activation : Une fois l’installation terminée, cliquez sur “Activate Add-On” dans la barre latérale. Le mini-icône du Lottie passera de noir et blanc à couleur, confirmant son activation.

Activation du Lottie dans un Module

Maintenant que votre Lottie AddOn est installé et activé, il est temps de l’utiliser dans le Module Editor. Ce dernier est un outil visuel, offrant une interface intuitive qui permet d’ajouter divers types de calques et animations, sans nécessiter de code.

Pour activer Lottie dans un module, allez dans l’onglet “Module General Options” puis cliquez sur “Addons”. Une boîte de dialogue s’ouvrira où vous pourrez sélectionner le Lottie AddOn et le valider en cliquant sur le bouton bleu “Enable Add-On”. Une fois activé, vous pourrez commencer à ajouter des calques Lottie à vos modules.

Ajouter des Calques Lottie

L’ajout de calques Lottie est une opération centrale lors de l’utilisation de ce AddOn. Les calques, étant les conteneurs pour les éléments visuels, audio ou de mise en page, vous permettent d’intégrer des animations dans vos créations.

Pour ajouter un calque Lottie, survolez le menu “Add Layer”, sélectionnez “Lottie” puis cliquez sur “Empty Placeholder”. Un rectangle vide apparaîtra sur votre toile, prêt à accueillir une animation.

Accéder aux Paramètres Lottie

Pour pouvoir ajouter une animation à ce calque, il faudra accéder à ses paramètres. Cliquez sur le calque créé, que ce soit sur la toile ou dans la timeline, puis rendez-vous dans l’onglet “Layer Options”. Cliquez sur l’icône Lottie pour entrer dans la sous-section dédiée. Vous y trouverez plusieurs panneaux pour configurer vos animations :

• Lottie Settings : Pour les contrôles généraux.
• Interactivity : Pour créer des animations interactives.
• Renderer Settings : Pour ajuster les propriétés de chargement et d’affichage.
• Lottie Editor : Pour personnaliser les couleurs de votre animation.

Ajouter des Animations Lottie aux Calques

Une fois que votre calque est en place, il est temps d’y ajouter l’animation. Cliquez sur le bouton “Select From Library” dans le panneau des paramètres Lottie pour parcourir la bibliothèque d’animations disponibles.

L’intégration d’animations tiers

Il est possible d’incorporer des animations provenant de fournisseurs tiers, comme Lordicon, qui propose des bibliothèques d’animations Lottie. Pour ce faire, cliquez simplement sur un lien dans la barre latérale pour explorer les animations. Si vous trouvez une animation à votre goût, il suffira de survoler cette dernière et de cliquer sur le bouton “+” pour l’ajouter à votre calque.

Importation d’animations Lottie externes

De plus, vous pouvez importer vos propres fichiers Lottie téléchargés ou créés, en accédant à “My Lottie Library” dans la barre latérale. Cliquez ensuite sur “Import Lottie Files”, ce qui vous permettra de sélectionner un fichier ou de le faire glisser dans la zone désignée pour l’importer. Une fois importé, vous verrez la miniature de l’animation s’afficher dans votre collection.

Prévisualiser les Animations Lottie

Après avoir ajouté une animation à votre toile, elle se jouera une fois par défaut. Si vous souhaitez la revoir, utilisez le bouton de lecture dans le panneau Lottie Settings. Pendant sa lecture, un bouton stop s’affichera, vous permettant de l’interrompre. Pour redémarrer l’animation depuis le début, cliquez sur “Refresh”.

Si vous désirez que l’animation se joue en boucle, vous pouvez activer le “Endless Loop”. Ainsi, en cas d’arrêt, elle reprendra là où elle a été interrompue si la boucle est activée, sinon elle recommencera depuis le début.

Astuce de gestion des animations

Quand vous déplacez la tête de lecture sur la mini-timeline, celle-ci peut se remémorer votre position, ce qui est très pratique si votre animation se termine sur une image vide. Cela vous permet de conserver l’animation visible sur votre toile après sa lecture.

Perspectives d’avenir : Configuration avancée des animations Lottie

Avec toutes ces bases, vous voilà prêt à tirer parti du potentiel du Slider Revolution Lottie AddOn. Ce guide a couvert tout ce qu’il faut savoir pour intégrer une animation sur la toile de votre module. Dans les prochains articles, nous aborderons des options de configuration supplémentaires. Vous découvrirez comment combiner des animations Lottie avec les animations standards de Slider Revolution, comment redimensionner vos animations et configurer des attributs essentiels tels que la durée, l’autoplay, le looping, le rendu et le chargement progressif.

En utilisant le Slider Revolution Lottie AddOn, vous ouvrez un monde de possibilités créatives pour enrichir vos projets web avec des animations dynamiques et interactives. Que vous soyez un designer web chevronné ou un novice, cet outil est un atout incontournable dans votre arsenal numérique.