chris_r Posted March 4, 2020 Share Posted March 4, 2020 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! Link to comment Share on other sites More sharing options...
OSUblake Posted March 5, 2020 Share Posted March 5, 2020 It's hard to tell what you doing from that code, like when/how your functions get called. Can you make a demo? The only thing that sticks out to me is your timeline isn't paused, so it's going to start playing once you call your createAnimation function. var t1 = gsap.timeline({ paused: true }); But I don't know if that is the problem you are talking about. 4 Link to comment Share on other sites More sharing options...
Carl Posted March 5, 2020 Share Posted March 5, 2020 hmm, this doesn't appear to be valid GSAP code for add() 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}) I think you want to do t1.to(".logo-button", {ease: "power2.out", duration: time1, opacity: 0.0}) t1.to(".logo", {ease: "power2.out", duration: time1, delay:0.4, opacity: 1.0}) t1.to(".husky-mono", {ease: "power2.out", duration: time1, opacity: 1.0}) 3 Link to comment Share on other sites More sharing options...
chris_r Posted March 5, 2020 Author Share Posted March 5, 2020 Thanks for the hint on .pause, it was that and the fact I was using .add, which I thought was the equivalent of .append in the old as3 version. Link to comment Share on other sites More sharing options...
chris_r Posted March 5, 2020 Author Share Posted March 5, 2020 Thanks Carl and OSUblake. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now