En los propios términos del Skill
Un skill oficial de GSAP para secuenciar animaciones con gsap.timeline(). Cubre la creación de una timeline y el encadenamiento de tweens que se añaden por defecto, y luego cómo reposicionarlos con el parámetro position: segundos absolutos, desplazamientos relativos "+=0.5"/"-=0.2", labels y ubicación con "<"/">".
Documenta las opciones del constructor de la timeline (paused, repeat, yoyo, onComplete/onStart/onUpdate, defaults), el etiquetado con addLabel() y la navegación con play()/tweenFromTo(), el anidamiento de timelines hijas en una maestra, y los métodos de reproducción, incluyendo restart, time, progress y kill. Termina con las buenas prácticas de GSAP y las trampas que evitar, en particular encadenar con delay y colocar ScrollTrigger en tweens dentro de una timeline.
Qué produce
- Un objeto timeline almacenado en una variable, la tl en cada ejemplo, al que se añaden los tweens encadenados y sobre el que actúan los métodos de reproducción.
- Un nuevo Tween devuelto por tweenFromTo que anima el playhead entre dos labels mientras la timeline está en pausa, sin ease.
- Una timeline eliminada: llamar a kill() elimina la timeline y, por defecto, también sus hijos.
Cómo funciona
- 01Crear una Timeline y Encadenar Tweens
Llame a gsap.timeline() y encadene llamadas a .to(). Sin una position especificada, cada tween se añade después de que termine el anterior, por lo que el orden es el orden en que lo escribe.
- 02Ubique Cada Tween en el Tiempo
La ubicación se define mediante el tercer argumento o una propiedad position en vars: segundos absolutos, desplazamientos relativos, nombres de labels, o < y > relativos a la animación añadida más recientemente.
- 03Otorgue Valores por Defecto Compartidos a la Timeline
Los valores por defecto entregados al constructor de la timeline se combinan en cada tween hijo, de modo que la duración y el ease se declaran una sola vez para toda la secuencia.
- 04Marcar momentos clave
addLabel() marca un punto con nombre en la línea de tiempo, y esa etiqueta puede usarse después como destino de posición para tweens posteriores en lugar de un número sin procesar.
- 05Anidar líneas de tiempo dentro de una maestra
Una línea de tiempo maestra puede tomar una línea de tiempo hija como una unidad y colocarla en un momento determinado, después del cual se añaden más tweens en relación con ella.
- 06Controlar toda la secuencia a la vez
Una vez construida, la línea de tiempo se reproduce y se pausa como una sola unidad en lugar de tween por tween.