Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Remi Turcotte

Little help about Tweenmax pause and restart

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:

 

https://codepen.io/RemiTurcotte/pen/orKzvr

 

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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...

Share this post


Link to post
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 :)

Share this post


Link to post
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...

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Please post exactly what your index.html file and your animation.js files looks like. I think the problem is somewhere in there.

 

Share this post


Link to post
Share on other sites

oh. you dont want to see that OSUblake, i'm an artist, not a coder (lol)

but seriously would posting you  the url in private work?

Share this post


Link to post
Share on other sites

Sure

 

Share this post


Link to post
Share on other sites
Just now, OSUblake said:

Sure

 

 

i can use the "message" on your profile for this?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×