Jump to content
Search Community

Little help about Tweenmax pause and restart

Remi Turcotte test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all!

 

I have played with javascript for a long time now, and like 10 years ago had a lot of fun with Tweenlite...

 

But i'm an artist ... brain has a very hard time thinking like a programmer hehehe

 

I reproduced my issue with a codepen, if anyone is generous enough to help me pass that little wall of mine,

I was always very bad with scope, and I'm pretty sure that's my issue:

 

ive read around and sweared at this for a few hours:

 

 

Working on a new site here,

I dont know why, but I can only tweenmax my svg when I'm in a function (???)

all the other ways i see online and try like var=something fail.

 

ALL the examples i see for pause() and restart() are like myAnimation.pause();

 

I dont care if my tweenmax is in a function, i can live with that, but how do i pause & restart it then?

 

anyone?

(10000000 thanks in advance)

 

(its my first time in codepen too, and im not sure the link works so im copy pasting my js code under here in case...)

 

function loopedTweenMax(){
        TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat:1,yoyo:true,onComplete:loopedTweenMax});
}
loopedTweenMax();

function pauseLTM(){
console.log("paused");
// how can i reach my tweenmax to pause it?
}
function restartLTM(){
console.log("restarted");
 // how can i reach my tweenmax to pause it?
}

See the Pen orKzvr by RemiTurcotte (@RemiTurcotte) on CodePen

Link to comment
Share on other sites

You need to save a reference to your tween outside of a function.

 

It's as simple as this:

 

var myAnimation = TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true });

 

 

If you need it to to be created by a function, you must return the tween.

 

function loopedTweenMax(){
  return TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true });
}

var myAnimation = loopedTweenMax();

 

 

Now you can control "myAnimation" inside of other functions. Notice how I removed your onComplete. Just use repeat: -1 to repeat infinitely.

 

See the Pen ZdgBYg by osublake (@osublake) on CodePen

 

 

 

 

 

  • Like 5
Link to comment
Share on other sites

Hey Remi and welcome to the forums!

 

A very rough way to think about scoping is that any variables created within a set of brackets { } cannot be seen by things outside of those brackets. But the areas within brackets can see their parents and grandparent's variables just fine. 

 

That's why the variable needs to be outside of the function as Blake suggests. 

  • Like 3
Link to comment
Share on other sites

Thanks for the quick response !

 

See the thing is, in the codepen, I can see your example working, and the explanation makes sense to me,

but when i try this here... it doesn't work???

 

It's just like one of the many many many different ways I tried before.

 

I'm SO baffled. this is so basic... What is it i'm not understanding?

 

function loopedTweenMax(){
        TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat:1,yoyo:true,onComplete:loopedTweenMax});
}
loopedTweenMax();

 

works, it rotates, but your example:

 

var myAnimation = loopedTweenMax();

function loopedTweenMax(){
  return TweenMax.to(".daclass",0.2, { rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true });
}

myAnimation.play();

 

doesnt.

It doesnt rotate.

 

 

the way my project is organized is as follow:

index.html loads animations.js (where the function is working, or not when i edit it to yours)

that function in animation.js is rotating (or fails to rotate) an svg file injected in the index file.

(I know (i think at least) that my injection works and my files are loaded in the proper order because I can see my initial function work and rotate the .daclass element)

 

i'm SO lost... 

:(

 

UPDATE: might be getting near here.

tried adding console.log("burpA"); and console.log("burpB"); in both functions ways, they both print to the console!
so both function...works, but in the suggested myAnimation way the class isn't reached anymore?

Still fighting...

Link to comment
Share on other sites

In the example you gave you're attempting to call the function before it's been created. You should switch the order of the variable declaration and the function like so:

 

function loopedTweenMax(){
  return TweenMax.to(".daclass",0.2, { rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true });
}

var myAnimation = loopedTweenMax();

myAnimation.play();

 

Keep in mind that code runs in linear order of the way that you write it :)

Link to comment
Share on other sites

3 minutes ago, ZachSaucier said:

In the example you gave you're attempting to call the function before it's been created. You should switch the order of the variable declaration and the function like so:

 


function loopedTweenMax(){
  return TweenMax.to(".daclass",0.2, { rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true });
}

var myAnimation = loopedTweenMax();

myAnimation.play();

 

Keep in mind that code runs in linear order of the way that you write it :)

Hi (thanks for helpin!)
yeah, i noticed, actually thats not me thats the proposed solution...
noticed that, and tried "as suggested" AND the other way around, which made sense to me too (after) 

both dont work, sadly...

 

Link to comment
Share on other sites

38 minutes ago, Remi Turcotte said:

yeah, i noticed, actually thats not me thats the proposed solution...
noticed that, and tried "as suggested" AND the other way around, which made sense to me too (after) 

both dont work, sadly...

 

 

That's how I taught JavaScript to new people. Put the "what" at the top (variables), and the "how" at the bottom (functions). Named functions are hoisted, so it's perfectly fine to declare them at the bottom of your code. It can make your code much cleaner looking.

 

 

 

 

 

  • Like 1
Link to comment
Share on other sites

SOLVED.

Thanks to OSUBlake, he figured that indeed his suggested code works. 

 

It's a chair problem, i'm causing it. somewhere in my code there is a delay, and that is preventing the code to work properly.

 

infinite thanks to everybody, gotta go BACKUP that working example and clean up my act

 

:)

:)

:)

 

  • Like 1
  • Haha 2
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...