Hi @GreenSock! Yes that was my concern — it feels weird to only create a timeline for one tween... But let's say there are two components, each has a bunch of divs, and I want to bring them to the scene in an intertwined fashion. So
change autoAlpha on div1 in component1
change autoAlpha on div2 in component2
change autoAlpha on div3 in component1
change autoAlpha on div4 in component2
...
This is actually kinda the case for what I'm doing right now — I would like to say "See this thing in component1? It corresponds to this thing in component2". So it might not be `autoAlpha` to change, but maybe background color or text property or whatever, but it isn't much tweening going on in that spot.
What would you suggest to be a better pattern?
1. create a new timeline for every method
Component1 {
function show1(){
return new TimelineLite().fromTo("div1", 1, {autoAlpha:0}, {autoAlpha:1})
}
function show3(){
return new TimelineLite().fromTo("div3", 1, {autoAlpha:0}, {autoAlpha:1})
}
}
Component2 {
function show2(){
return new TimelineLite().fromTo("div2", 1, {autoAlpha:0}, {autoAlpha:1})
}
function show4(){
return new TimelineLite().fromTo("div4", 1, {autoAlpha:0}, {autoAlpha:1})
}
}
2. initialize component timeline somewhere on component instance and add tween to it
Component1 {
const timeline = new TimelineLite()
function show1() {
return timeline.to("div1", 1, {autoAlpha:0}, {autoAlpha:1})
}
function show3() {
return timeline.to("div3", 1, {autoAlpha:0}, {autoAlpha:1})
}
}
Component2 {
const timeline = new TimelineLite()
function show2() {
return timeline.to("div2", 1, {autoAlpha:0}, {autoAlpha:1})
}
function show4() {
return timeline.to("div4", 1, {autoAlpha:0}, {autoAlpha:1})
}
}
3. define all tweens upfront and pretend nothing has been done yet, then use `tweenTo`
Component1 {
const timeline = new TimelineMax().fromTo("div1", 1, {autoAlpha:0}, {autoAlpha:1}, "show1").fromTo("div3", 1, {autoAlpha:0}, {autoAlpha:1}, "show3").progress(0).pause()
function show1() {
return timeline.tweenTo("show1")
}
function show3() {
return timeline.tweenTo("show2")
}
}
Component2 {
const timeline = new TimelineMax().fromTo("div2", 1, {autoAlpha:0}, {autoAlpha:1}, "show2").fromTo("div4", 1, {autoAlpha:0}, {autoAlpha:1}, "show4").progress(0).pause()
function show2() {
return timeline.tweenTo("show2")
}
function show4() {
return timeline.tweenTo("show4")
}
}
Sorry if I'm getting too stubborn on getting THE ANSWER, it's just that I'm going to have several big scenes that work in this fashion (I'm creating an lengthy animation explaining a complex piece of calculation), so I would love to get your opinion on the best way to write this, so I don't have to rewrite a lot of stuff when I realize my approach was wrong. You guys are the best!