Hi,
I want to have two sets of animations:
Text that fades in and out on one
A background image that slides from left to right on the other. This slide effect happens at the same time the text fades in and out
Here's my code:
const tl = gsap.timeline();
tl.to("#copy1", {duration: 1.0, autoAlpha: 1, onStart: function(){
const tl2 = gsap.timeline();
tl2.set("#slider", {autoAlpha: 1});
tl2.to("#slider", {duration: 9.0, right: 0});
return tl2;
}
});
tl.to("#copy1", {duration: 1.0, autoAlpha: 0, delay: 2.0});
tl.to("#copy2", {duration: 1.0, autoAlpha: 1});
tl.to("#copy2", {duration: 1.0, autoAlpha: 0, delay: 2.0});
tl.to("#copy3", {duration: 1.0, autoAlpha: 1});
return tl;
The code works, but I'm wondering if it could be cleaner, and would like someone to check my code and suggest improvements, if any.
Also...
I'd like to set the duration of the slider image to the total time of the first timeline (tl).
I tried:
var total = tl.totalDuration();
tl2.to("#slider", {duration: total, right: 0});
...but that had no effect.
Any help would be appreciated.
Thanks.