Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Friebel

(Right way to) put pause-marker inside timeline?

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

I'm sure it's somewhere there, 'cause Greensock has everything, but I cannot seem to find the right way.

 

What I want is to create a timeline containing several animation sequences. Those animation sequences I would like to start seperately and they are not allowed to continue to the next part.

 

To accomplish this I put 'pause-markers'  at the end of each animationpart and labels at the start of each new part. Another timeline then gotoAndPlays the right animationpart, wich stops at the 'pause-marker' when the part is finished.

 

Example:

var tl_eyes = new TimelineMax( { paused: true });


        tl_eyes
            // ------- OPEN EYES --------
            .addLabel('openEyes')
            .set(leftEye, { alpha : 1}, 'openEyes')
            .set(rightEye, { alpha : 1}, 'openEyes')
            .to(leftEye, 0.3, { scaleX: 1, scaleY: 1, ease:Back.easeInOut })
            .to(rightEye, 0.3, { scaleX: 1, scaleY: 1, ease:Back.easeInOut }, '-=0.2')


            .addCallback(function() { tl_eyes.pause(); })


            // ------- BLINK MIDDLE --------
            .addLabel('blinkMiddle')
            .to(leftEye, 0.1, { scaleY: 0 }, 'blinkMiddle')
            .to(rightEye, 0.1, { scaleY: 0 }, 'blinkMiddle')


            .to(leftEye, 0.2, { scaleY: 1 }, 'blinkMiddleUp')
            .to(rightEye, 0.2, { scaleY: 1 }, 'blinkMiddleUp')


            .addCallback(function() { tl_eyes.pause(); })
            // ------- LOOK LEFT --------
            .addLabel('lookLeft')


            .to(leftEye, 0.1, { scaleY: 0 }, 'lookLeft')
            .to(rightEye, 0.1, { scaleY: 0 }, 'lookLeft')


            .to(leftEye, 0.3, { x: normLeft_X - eyeLookOffsetSmallX }, 'lookLeftMove')
            .to(rightEye, 0.3, { x: normRight_X - eyeLookOffsetLargeX }, 'lookLeftMove')


            .to(leftEye, 0.2, { scaleY: 1 }, 'lookLeftOpen-=0.2')
            .to(rightEye, 0.2, { scaleY: 1 }, 'lookLeftOpen-=0.2');

 

The current pause-markers I created using .addCallback wich calls a function that pauses the timeline. But I like a cleaner method of doing this, like .pause or something. For some reason I cannot find a method like that. Am I mistaken or overlooking something here?

 

So my question is:

What's the right way of put methods inside the timeline wich pauses the timeline?

Is there something like pause?

 

And also:

Inside the 'pause-markers' I use addCallback wich triggers the pause-method of the timeline by variable. But it's not very clean. Is there a way like 'this' to accomplish the same, 'cause the callback is triggered from within itself? (I know this is a Javascript question, but maybe somebody can point me a direction here).

 

Thanks!!

 

And again: greensock rules!! I'm sure there is a better way for doing this already build in, 'cause Greensock surprises me everytime again

Link to comment
Share on other sites

I think you will find TimelineLite's addPause() method to do exactly what you need.

 

When using addPause() the timeline self-pauses itself so you don't have to worry at all about self-referencing the timeline with "this" or anything like that.

 

If you need more help let us know.

  • Like 2
Link to comment
Share on other sites

Thanks! How could I overlook that?? Works great!  8-)

Link to comment
Share on other sites

  • 1 month later...

Hey Carl I get an error like the one below

 

ReferenceError: Error #1069: Property addPause not found on com.greensock.TimelineLite and there is no default value.

 

Any ideas why it says that. Im using the latest version.

 

I think you will find TimelineLite's addPause() method to do exactly what you need.

 

When using addPause() the timeline self-pauses itself so you don't have to worry at all about self-referencing the timeline with "this" or anything like that.

 

If you need more help let us know.

Link to comment
Share on other sites

Hi Dwayne,

 

I just did a simple test and could not replicate any error:

 

import com.greensock.*;


var tl:TimelineLite = new TimelineLite();


tl.to(mc, 1, {x:200})
.addPause()
.to(mc, 1, {y:200});


trace(TweenLite.version); //12.1.1

Feel free to upload a zipped fla that has just enough code/assets to reproduce the error.

 

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.
×