Front-end

Cette fois-ci, nous ne nous intéresserons pas à un nouveau Framework Javascript , mais une bibliothèque d’animation. Grâce à GreenSock, vous pouvez animer n’importe quel élément du DOM grâce à un ensemble d’outils.

Pour en savoir plus sur la dernière mise à jour de la bibliothèque d’animation, n’hésitez pas à lire notre article GSAP 3

Que propose GreenSock ?

Le but de GreenSock est de rendre l’animation du code simple et intuitive, il a comme particularité de s’apprendre facilement. Il est composé d’un ensemble d’outils possédant chacun un rôle :

– TweenLite : considéré comme le « noyau moteur », cet outil gère l’animation de l’objet et la propriété de votre choix. Cet outil est une version Lite, mais peut être étendu à l’aide d’API optionnelles.

TweenMax : une version plus costaud de TweenLite. Elle possède les mêmes capacités que le noyau moteur, mais est également capable de produire des fonctionnalités secondaires. TweenMax possède également une petite bibliothèque de plugins comme CSSPlugin, qui permet d’animer toutes les propriétés CSS de vos éléments HTML.

– TimelineLite : un incontournable de l’animation, TimelineLite est un outil de séquençage puissant qui agit comme un conteneur pour les éléments choisis. Il permet de simplifier le contrôle de ces mêmes éléments et de gérer avec précision leur synchronisation les uns par rapport aux autres.

– TimelineMax : propose les mêmes fonctionnalités que TimelineLite, mais aussi d’autres fonctionnalités secondaire. Vous pourrez trouver une liste de ces fonctionnalités ici

3 animations réalisées avec TweenMax !

Maintenant que les explications sont terminées, il est temps de passer à la pratique ! Voici 3 exemples d’animations basiques qu’il est possible de réaliser avec TweenMax :

–       SplitText :  avec cet élément javascript, vous pouvez découper les caractères d’un texte pour les animer ensuite. Dans le cas ci-dessous, le texte a été découpé lettre par lettre, puis animé avec TweenMax.

See the Pen GSAP1 by Matthieu (@Matthieu87) on CodePen.

–       Draggable : cet élément de TweenMax permet de créer un élément (ici un bloc) et de le déplacer dans un espace défini

See the Pen GSAP2 by Matthieu (@Matthieu87) on CodePen.

–       CardWrapper : une fonction capable de retourner un élément et y afficher du contenu. Ici, nous l’avons utilisé pour retourner le logo numendo et afficher « Hello ! » derrière.

See the Pen GSAP3 by Matthieu (@Matthieu87) on CodePen.

L’article vous a plus ? N’hésitez pas à le partager sur les réseaux sociaux ! Si vous souhaitez en savoir plus sur le monde du digital, découvrez nos autres articles.

 

Pour plus d’articles, n’hésitez pas à consulter notre blog

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

HyperApp : une bibliothèque JavaScript de seulement 1 KB ?

Annoncé en fin d’année 2017, HyperApp est une bibliothèque JavaScript proposant de nombreuses fonctionnalités, le tout pour un poids de seulement 1KB ! Ce qui est relativement peu comparé à Jquery par exemple, qui pèse une trentaine de KB. Malgré ce côté insolite, cette bibliothèque est-elle quand même performante ? La réponse dans cet article !

Firefox Reality : un navigateur dédié à la AR/VR

Après avoir amélioré les performances de son navigateur phare, la société Mozilla a décidé
de s’imposer sur le marché de la réalité mixte en lançant son navigateur dédié : Firefox
Reality. Que propose-t- il ? Est-ce une révolution ? La réponse dans cet article !

Angular CDK : Google sort un kit de composants pour Angular

Angular CDK : Google sort un kit de composants pour Angular

La multinationale américaine a décidé de mettre fin aux tâches répétitives sur son Framework JS. La solution qu’elle propose est un nouveau kit de composants qui facilitera les processus de développement et qui fera surtout gagner du temps aux développeurs. Découvrez Angular CDK

Centre de préférences de confidentialité

    Cookies Fonctionnels

    gdpr[allowed_cookies], gdpr[consent_types], wfvt_2000878799, wordfence_verifiedHuman

    Advertising

    Cookies Satistiques

    _ga, _gat, _gid

    Cookies externes

    PREF, VISITOR_INFO1_LIVE, YSC, GPS, s_gl, CONSENT
    CONSENT, 1P_JAR