Jump to content
Search Community

pausing a timeline

pfash 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'm brand new to timelines so please assume this is a very basic answer:

 

I want myElement to scale up then there's a 2 sec wait (where nothing happens) and that scaling up  reverses.

 

So simple. Yet I'm floundering. What would that look like?

 

I'm writing this code into Animate CC to be exported as a Canvas project, by the way. Here's my code:

 

    tl_mytimeline = new TimelineMax({paused:true, reversed:true});
    TweenLite.defaultEase = Elastic.easeInOut; 
                              
    tl_mytimeline.to(this.myElement, 3.5,{scaleX:2,scaleY:2, },0);


    //need a 2 second pause here
    //now reverse the above scaling up


    tl_mytimeline.play();

 

Link to comment
Share on other sites

Hi @pfash and welcome to GreenSock!

 

There are quite a few ways to do something like this, some better than others depending on the scenario. But here a few ways ...

 

See the Pen daaMmm by sgorneau (@sgorneau) on CodePen

 

option 1 shows how to use the delay property of a tween

 

option 2 shows how to use a "dummy" tween to stick some time into the timeline where nothing actually happens

 

option 3 shows how to inject an addPause to a timeline and then use a callback function to undo it some time later

 

Hope this helps!

  • Like 3
Link to comment
Share on other sites

Right on, @Shaun Gorneau. I also would like to recommend that @pfash get acquainted with the position parameter (see https://greensock.com/position-parameter) which could be used instead of a delay. 

 

Also, don't forget about repeatDelay. That could be leveraged like this:  

var tl4 = new TimelineMax({repeat:-1});     
tl4.to( '#div4', 3.5, {scale: 2, repeat:1, repeatDelay:2, yoyo:true});

 

Here's a fork: 

See the Pen 7133878ea881bcc2b9efc4d6f19b9d2e by GreenSock (@GreenSock) on CodePen

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

Quote

 I noticed that after a few minutes the 3rd div (blue ball) seems to get out of sync with the others even tho they start at the same time.


 

var tl3 = new TimelineMax({ yoyo: true, repeat: -1 });     
tl3.to( '#div3', 3.5, {scale: 2} )
   .addPause( 3.5, function(){ setTimeout( function(){ tl3.play(); }, 2000); } )

 

 

Yes, that timeline uses a setTimeout() which is 

 

1) generally not reliable

2) not synchronized with the rest of GSAP's tick (or heartbeat)

 

Additionally the function that calls the setTimeout takes some extremely small amount of time to execute, but after hundreds of repeats that time will add up.

 

 

I would vote for the tl1 or tl4 aproaches.

 

 

 

 

 

 

 

  • Like 5
Link to comment
Share on other sites

Hi,

I'm doing something wrong here. Just trying to use the first option above (code for the red ball) to get 'myInstanceName' to do the scale up, pause and then scale down thing.

 

As indicated, I'm publishing an HTML Canvas project with Animate CC ...and writing this in the script window:

 

////THIS WORKS 
tl_mytimeline = new TimelineMax({paused:true, reversed:true});
                    TweenLite.defaultEase = Elastic.easeInOut; 

    tl_mytimeline.to(this.myInstanceName, 3.5,{scaleX:2,scaleY:2, },0); 
    tl_mytimeline.play();

 

////WHY DOESN'T THIS WORK? 
    
TweenLite.defaultEase = Elastic.easeInOut

tl1 = new TimelineMax({repeat: -1});                           
tl1.to( this.myInstanceName, 3.5, {scale: 2} )
   .to( this.myInstanceName, 3.5, {scale: 1}, "+=2");

 

Thanks for your help.

Link to comment
Share on other sites

Pretty sure with EaselJS objects you have to set scaleX and scaleY independently... they don't have a scale property.

 

For a test do:

 


this.myInstanceName.scaleX = 2 // will work
this.myInstanceName.scaleY = 2 // will work

this.myInstanceName.scale = 4  // probably won't work

 

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

You're correct, Carl.

First 2 lines work but last doesn't.

 

I changed my code to:

TweenLite.defaultEase = Elastic.easeInOut

tl1 = new TimelineMax({repeat: -1});                           
tl1.to( this.myInstanceName, 3.5, {scaleY: 2, scaleX: 2  } )
   .to( this.myInstanceName, 3.5, {scaleY: 1, scaleX: 1}, "+=2");

...and it works.

 

Much appreciated!

 

I have two related but broader questions. (Let me know if I should create a different post.) :

 

1.) Obviously, my unfamiliarity with the terms and basic syntax is the problem. I've run into this quite a bit.

When I need a solution (need to make my animation do something) I can't just look for the plain, vanilla javaScript that does that thing and put it in my Animate CC scripting window. That works sometimes but seems like, for certain things, I need to adapt that syntax.
 

-For example, it sounds like, if I'm working with Greensock TweenMax timelines, I can't just use the syntax that I see on this site I need to use an 'EaselJS object version' of that syntax, right? Do I find that syntax at: http://www.createjs.com/docs/easeljs/classes/DisplayObject.html  or somewhere else?

 

2.) In general, it seems like the Greensock TweenMax functionality is to be used for, what I'd call 'script-based animation' (IOW: movement of elements that is driven by the script while the play head stays on frame 1.) ...rather than 'timeline-based animation' that takes place over multiple frames (while the play head moves). Is that true?

 

Is one type of approach (script-based vs. timeline-based) any more effective than the other when synchronizing sound to movement? 

 

Thanks again, Carl.

Link to comment
Share on other sites

The vast majority of the demos we use show GSAP animating the CSS properties of DOM elements.

GSAP can animate any numeric property of any JavaScript object which is why it also works with canvas (easeljs, pixi, three.js, etc).

 

When working with Animate CC (easeljs) you need to just make sure you are animating properties that exist. That documentation for DisplayObjects is really good to keep handy. 

 

Its important to note though that the GSAP syntax for timelines and tweens is EXACTLY the same regardless of what you are animating and where it is rendering.

Quote


2.) In general, it seems like the Greensock TweenMax functionality is to be used for, what I'd call 'script-based animation' (IOW: movement of elements that is driven by the script while the play head stays on frame 1.) ...rather than 'timeline-based animation' that takes place over multiple frames (while the play head moves). Is that true?

 

 

Yup

 

Quote

Is one type of approach (script-based vs. timeline-based) any more effective than the other when synchronizing sound to movement? 

 

That's tricky, unfortunately their is no audio synching in Animate CC (for html5 output) So even though you may see a sound wave in your timeline and be able to roughly visualize and set up where animations can begin and end... there are no guarantees and its far from perfect.

 

 

 

 

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