https://github.com/eliooooooo/integration-gsap
My personal GSAP documentation. From my learning of GSAP
https://github.com/eliooooooo/integration-gsap
documentation gsap-animation gsap-scrolltrigger gsap-timeline
Last synced: about 2 months ago
JSON representation
My personal GSAP documentation. From my learning of GSAP
- Host: GitHub
- URL: https://github.com/eliooooooo/integration-gsap
- Owner: eliooooooo
- Created: 2024-03-05T10:17:19.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-21T11:15:01.000Z (about 1 year ago)
- Last Synced: 2025-04-15T06:45:03.753Z (about 2 months ago)
- Topics: documentation, gsap-animation, gsap-scrolltrigger, gsap-timeline
- Homepage:
- Size: 11.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GSAP Help
## Création d'une animation :
De base, une animation se lance directement au chargement de la page.
```javascript
let container = document.querySelectorAll('.background');
gsap.from(".circle", {duration: 0.5, y:100, ease:"back", stagger:0.1});
gsap.to(container, {opacity: 0, x: 500});
```
`from()/to` correspond au départ ou à la finalité de l'animation
`".circle"` sélecteur de l'objet à animer
`duration/opacity/ease/...` les différents attributs de l'animation
Il est possible de déclarer des fonctions dans les attributs.
```javascript
gsap.from(".circle", {duration: 1, y: () => Math.random()*400 - 200});
```
## Création d'une timeline :
La timeline permet d'organiser de manière réactive le déclenchement des animations.
```javascript
let tl = gsap.timeline({reapeat: -1, yoyo: true});
tl.addLabel("timer", "+=3");
tl.from(circle, {duration: 1, y: 100, opacity: 0, stagger: 0.5, ease: 'elastic'}, "-=1");
tl.to(background, {duration: 2, rotation: 360, ease: 'elastic'}, "timer");
```
`tl.addLabel` Permet de définir une variable de temps.
`"-=1"` Permet de définir le départ de l'animation par rapport à l'animation qui la précède.