Hi all,
I was hoping you could solve this problem I am having, I have read through the forums but cannot seem to find an answer / logical solve to the following:
I have a series of functions that each have a part of an overall animation. I am using a master timeline to add each of these two, so that they fire in series.
I want to add a delay between when one finishes and the next starts, here is a simplified example of what I need:
master.add( showImage())
//I would like to set a delay here until 'fadeImage' starts
.add( fadeImage(), "showText")
.add( showText(), "showText")
function showImage() {
var tl = new TimelineMax();
tl.set(bgImage, {opacity: 0, scale: 1.2});
tl.to(bgImage, 2, {opacity: 1, ease: Sine.easeOut}, "sweepIn");
tl.to(bgImage, 1, {scale: 1, ease: Sine.easeOut}, "-=2");
return tl;
}
function fadeImage() {
var tl = new TimelineMax();
tl.to(bgImage, 2, {opacity: 0.1, ease: Sine.easeOut});
return tl;
}
function showText() {
var tl = new TimelineMax();
tl.set(title, {opacity: 0, scale: 1.5});
tl.set(subHead, {opacity: 0, scale: 1.5});
tl.to(title, 2, {opacity: 1, scale:1, ease: Sine.easeOut}, "sweepIn");
tl.to(subHead, 1, {opacity: 1, scale: 1, ease: Sine.easeOut}, "-=2");
return tl;
}
Thanks,