I'm new to using GSAP in javascript.
In AS3 I would create a timeline in a function and append tweens to it like so:
public function createAnimation():void {
anim = new TimelineMax({onComplete:animComplete});
anim.stop();
anim.addLabel("CONTENT");
anim.append( new TweenLite( bb.s1_m, 0.20, {alpha:1, ease:Quad.easeOut} ) );
anim.append( new TweenLite( bb.s2_m, 0.20, {alpha:1, ease:Quad.easeOut} ) );
anim.append( new TweenLite( bb.s3_m, 0.20, {alpha:1, ease:Quad.easeOut} ) );
}
Then play it from another function, which worked with no issues:
public function startAnimation(e:Event=null):void {
anim.gotoAndPlay("CONTENT");
}
In Javascript I am defining a global var and creating a timeline like this:
var t1 = gsap.timeline();
function createAnimation () {
var time1 = 0.50;
var time2 = 0.30;
t1.add(".logo-button", {ease: "power2.out", duration: time1, opacity: 0.0})
t1.add(".logo", {ease: "power2.out", duration: time1, delay:0.4, opacity: 1.0})
t1.add(".husky-mono", {ease: "power2.out", duration: time1, opacity: 1.0})
}
Then trying to play it like this:
function playAnimation () {
t1.play();
}
The above approach is not working, however the function below will play the animation (meaning in general GSAP is functioning):
function animateGSAP () {
var time1 = 0.70;
var time2 = 0.70;
gsap.to(".logo-button", {ease: "power2.out", duration: time1, delay:0.0, opacity: 0.0});
gsap.to(".logo", {ease: "power2.out", duration: time1, delay:0.4, opacity: 1.0});
gsap.to(".husky-mono", {ease: "power2.out", duration: time1, delay:1.0, opacity: 1.0});
}
How can I create a timeline in a function in Javascript and control it with another function?
Thanks for any help!
