Jump to content
Search Community

Creating timeline in a function

chris_r test
Moderator Tag

Recommended Posts

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

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.

 

 

  • Like 4
Link to comment
Share on other sites

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})

 

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...