Animation au Hover de Rotation depuis la dernière valeur de Rotation
Animation au Hover de Rotation depuis la dernière valeur de Rotation

Animation au Hover de Rotation depuis la dernière valeur de Rotation

Sommaire

Présentation

Rien de tel que la demande de David P. pour décrire ce cas précis:

" J'ai un bouton pour lequel :hover je veux faire un rotate de 180deg sur un autre et si je "Re":hover je veux qu'il refasse un rotate de 180 mais en partant de la position liée au premier hover ?" Découvrir avec cette exemple: https://tympanus.net/Development/CircularTextEffect/

Un peu de Custom Code avec AnimeJS et hop c'est réglé. Bon, il y aura quelques réglages à effectuer, mais rien de compliqué. Je te montre ça. 🤯

Étapes

  • Donner une .class spécifique à tous les éléments: - Le déclencheur (dans mon cas un bouton) - L'élément 1 à tourner - L'élément 2 à tourner - A toi d'ajouter d'autres éléments si besoin.
  • Ajouter le Custom Code ci-dessous dans la partie "Before </body> tag" des paramètres de la page ou du projet selon l'usage.
  • Remplacer "TACLASS0" par la .class que tu as défini dans l'étape n°1 pour ton déclencheur. Remplacer "TACLASS1" par la .class que tu as défini dans l'étape n°1 pour ton élément 1. Remplacer "TACLASS2" par la .class que tu as défini dans l'étape n°1 pour ton élément 2. Prendre soin de conserver le point juste avant ta .class dans le custom code.
  • Définir la valeur de rotation à chaque Hover en remplaçant le "180" déjà présent dans le code.
  • Tu peux ajouter un Délai en modifiant la valeur de Delay qui est définie en millisecondes.
  • BONUS: Pour ajouter un troisième élément, il te faudra dupliquer cette ligne là: const elementToRotate2 = document.querySelector(".TACLASS2") et remplacer elementToRotate2 par elementToRotate3 et et remplacer TACLASS3 par la .class de ton 3ème élément. Pour ajouter un troisième élément, il te faudra également dupliquer ces lignes là: anime({ targets: elementToRotate2, rotate: [currDegre, nextDegre], // 1 seconde duration: 1000, delay:200, // all easings here : https://animejs.com/documentation/#pennerFunctions easing: 'easeInOutSine' }) et remplacer elementToRotate2 par elementToRotate3. Répéter pour davantages.
  • Libre à toi de changer la durée (duration en millisecondes), le délai (delay en millisecondes) et la courbe de vitesse (easing)
  • Sauvegarder & Publier.

Vidéo

Code Nécessaire

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous"></script>
<script>
const btnDoRotate = document.querySelector(".TACLASS0")
const elementToRotate1 = document.querySelector(".TACLASS1")
const elementToRotate2 = document.querySelector(".TACLASS2")
let currDegre = 0
btnDoRotate.addEventListener("mouseenter", () => {
  const nextDegre = currDegre + 180
  anime({
    targets: elementToRotate1,
    rotate: [currDegre, nextDegre],
    // 1 seconde
    duration: 1000,
    delay: 0,
    // all easings here : https://animejs.com/documentation/#pennerFunctions
    easing: 'easeInOutSine'
  })
  anime({
    targets: elementToRotate2,
    rotate: [currDegre, nextDegre],
    // 1 seconde
    duration: 1000,
    delay:200,
    // all easings here : https://animejs.com/documentation/#pennerFunctions
    easing: 'easeInOutSine'
  })
 currDegre = nextDegre
})

</script>

image

Apprends à créer un site moderne, dynamique et intègre les meilleurs outils du marché dans Webflow. Rejoins la formation sans attendre & Maitrise Webflow très rapidement.

-20% offert avec le code WIKI20 (valable sur les paiements en 1x et 4x)