Timeline – Parámetro Position
Publicado por Iván Gajate el 6 de octubre de 2014 en Desarrollo Web, JavaScript | Los comentarios están cerrados.
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.