La globalité des sections auront besoin de la classe section pour pouvoir fonctionner avec les autres (sauf quelques sections comme le Header ou le Hero). Pour modifier ces styles, nous ajouterons des classes qui seront préciser plus bas.

Ceci est la deuxième section disponible. En ajoutant la classe «section-inverse», nous pouvons changer les couleurs de la section.

Ceci est la manière d'ajouter une courbe à votre section (la classe «section-inverse» n'est pas inclu dans ce snippet).

Ceci est la manière d'ajouter une courbe à votre section (la classe «section-inverse» n'est pas inclu dans ce snippet).

La composante Animations permet de créer divers séquences grâce à GSAP. Voici une exemple d'animation réalisable grâce à cette composante. Vous aurez par la suite des presets qui vous permettra de rapidement créer des animations. Pour en ajouter plus, demander à Noah de le faire pour vous.

Le dataset "data-animation" est l'élément le plus important pour créer des animations dans le site web. Il agit comme déclencheur pour animer ses enfants. Son comportement peut aussi changer dépendement de son contenu.

En ajoutant comme contenu au dataset "onScroll", l'animation se jouera seulement lorsqu'il apparaît dans la fenêtre de l'utilisateur. Lorsqu'aucun contenu est dans le dataset, les animations se jouera par défaut.

Le dataset "data-animate" est la deuxième pièce maitresse de cette composante. Elle sert à indiquer quel élément devra être animer. En ajoutant un contenu au dataset, nous pouvons lui définir une animation (Voir les "Presets").

data-duration

Le dataset "data-duration" permet de modifier la durée de l'animation.

data-start

Le dataset "data-start" permet de repousser le commencement de l'animation.

data-split

Le dataset "data-split" permet de séparer le texte en plusieurs morceaux dépendement de son contenu.

data-stagger

Le dataset "data-stagger" permet d'ajouter un délai par contenu séparé.

Ceci est l'animation «fromTop». Une transition qui ramène son porteur à sa position d'origine depuis le haut.

Ceci est l'animation «fromBottom». Une transition qui ramène son porteur à sa position d'origine depuis le bas.

Ceci est l'animation «fromLeft». Une transition qui ramène son porteur à sa position d'origine depuis la gauche.

Ceci est l'animation «fromRight». Une transition qui ramène son porteur à sa position d'origine depuis la droite.

Ceci est l'animation «fromTopFade». Une transition qui ramène son porteur à sa position d'origine depuis le haut tout en changeant son opacité.

Ceci est l'animation «fromBottomFade». Une transition qui ramène son porteur à sa position d'origine depuis le bas tout en changeant son opacité.

Ceci est l'animation «fromLeftFade». Une transition qui ramène son porteur à sa position d'origine depuis la gauche tout en changeant son opacité.

Ceci est l'animation «fromRightFade». Une transition qui ramène son porteur à sa position d'origine depuis la droite tout en changeant son opacité.

Ceci est l'animation «zoomIn». Une transition qui ramène son porteur à sa taille d'origine.

Ceci est l'animation «zoomOut». Une transition qui ramène son porteur à sa taille d'origine.

Ceci est l'animation «zoomInFade». Une transition qui ramène son porteur à sa taille d'origine tout en changeant son opacité.

Ceci est l'animation «zoomOutFade». Une transition qui ramène son porteur à sa taille d'origine tout en changeant son opacité.

Ceci est l'animation «fadeIn». Une transition qui fait apparaître son porteur (tel un fantôme)