Timeline – Parámetro Position

Publicado por Iván Gajate el 6 de octubre de 2014 en Desarrollo Web, JavaScript

Sigo siendo super fan del TweenMax como herramienta para animar, y cuando utilizas a fondo el TimelineMax se pueden hacer animaciones que nunca pensaste hacer en HTML 🙂
Hay un parámetro extra al final del todo que nos da mucha flexibilidad. Position:

.to( target, duration, vars, position )

Lo que hace es “sacar” esa animación de su flujo normal en el timeline y fuerza a que empiece en otro momento que nosotros queramos.
Podemos decirle que empiece en un tiempo concreto desde que empezó el timeline, un segundo, dos segundos… o relativo a lo que sería su tiempo normal de comienzo, “+=1” por ejemplo empieza un segundo después de lo que le correspondería.
También se puede crear un label como haríamos en Flash para referirnos a ese momento con mayor facilidad.

Algo así:

 

tl.to(element, 1, {x:200})
  //1 second after end of timeline (gap)
  .to(element, 1, {y:200}, "+=1")
  //0.5 seconds before end of timeline (overlap)
  .to(element, 1, {rotation:360}, "-=0.5")
  //at exactly 6 seconds from the beginning of the timeline
  .to(element, 1, {scale:4}, 6);

Se explica muy bien en el propio vídeo de Greensock.

Hay ejemplos muy chulos como este.

 

Los comentarios están cerrados.