I need to build a grid first, and then trigger an animation of it.
(and keeping control of the timeline)
But I want to keep the animation separate from the main app, so I'm using import module.
My problem is that it seems that the animation load BEFORE the grid is built and the animation never trigger when I use import { } from.... and give wrong total time value...
I think this is a async issue in ES6, is there a way to defer the creation of the Timeline instance ?
/* app.js */
import {Grid, Animations} from "./components"
// GRID CONSTRUCTION
Grid.build()
console.log(Animations)
// WRONG DURATION : TimelineMax {vars: {…}, _totalDuration: 1.5, _duration: 1.5, _delay: 0, _timeScale: 1, …}
// IF I paste the animation inside the app.js file AFTER Grid.build() :
// GOOD DURATION : TimelineMax {vars: {…}, _totalDuration: 2.5, _duration: 2.5, _delay: 0, _timeScale: 1, …}
/*****************************************/
/* Animations.js */
import { TweenMax, TimelineMax, Draggable } from 'gsap'
var intro = new TimelineMax()
.addLabel('deploy',1)
.staggerTo('.dropH',0.5,{
attr:{x1:0,x2:window.innerWidth},
stagger: {
amount: 0.5,
from: 'center',
}
},0.5,'deploy')
.staggerTo('.dropV',0.5,{
attr:{y1:0,y2:window.innerHeight},
stagger: {
amount:.5,
from: "center",
}
},0.5,'deploy')
.staggerFrom('.out',0.5,{
attr:{y1:'50%',y2:'50%'},
stagger: {
amount:.5,
from: "start",
grid:[20,20]
}
},0.5,'deploy+=0.5')
.staggerFrom('.out2',0.5,{
attr:{x1:'50%',x2:'50%'},
stagger: {
amount:.5,
from: "start",
grid:[20,20]
}
},0.5,'deploy+=0.5')
.from('.drop',.5,{opacity:0})
export default intro