Interactive animations when hovering (for button)

To enhance your f luidbook buttons, you can add an animation when you hover over them. There are a number of basic

possibilities, easy to set up in the Toolbox. But you can take customization even further with SVG animations.

Pulsing ef fect animation in addition

Bouton de test

Simple button

Bouton de test

A button with full SVG animation

Bouton de test

Pour réaliser ce genre d’animation interactive, il suf fit de réaliser votre animation SVG de votre

bouton dans Af ter Ef fect, en respectant le format exact de l’élément dans la page (faire en sorte

que l’animation soit dynamique et pas trop longue). Faire attention à ce qu’il n’y ait pas de délais

au début et à la f in de l’animation. Il faut ensuite ajouter ces deux lignes de code à la suite des

paramètres de votre f ichier .html. Penser à régler vos paramètres loop et autoplay sur false.

Attention à ne pas proposer ce genre d’animation s’il y a trop de boutons dif férents dans le f luidbook.

Car chaque changement de design ou de texte nécessitera une animation supplémentaire, ce qui peut vite

devenir fastidieux.

Il est possible d’ajouter une animation loop

(vue précédemment) sur un des éléments

pour attirer l’attention.

Pour garder l’animation loop du Toolbox,

supprimer simplement la première frame

de votre animation dans After Effect

Ici, seul l’effet de survol

des liens du Toolbox est utilisé.

La variable anim.setSpeed() permet de changer

la vitesse d’animation (la valeur par défaut est 1).

Il est recommandé de toujours mettre une vitesse d’au

moins 2 voir 3, pour le rollback de l’animation lorsque

l’utilisateur sort sa souris de la zone du bouton.

Si besoin, vous pouvez aussi accélérer l’animation

de base (sans repasser par Af ter Ef fect) pour

augmenter le dynamisme, en passant la première

variable à 1.25 ou 1.5, par exemple.

document.getElementById(‘lottie’).addEventListener(‘mouseenter’, function

() { anim.setDirection(1); anim.setSpeed(1); anim.play(); });

document.getElementById(‘lottie’).addEventListener(‘mouseleave’, function

() { anim.setDirection(‑1); anim.setSpeed(3); anim.play(); });