Jump to content
Search Community

Timeline - call/pause/resume

karpec 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

Hello everyone at GSAP forum.

 

I appreciate any help with my problem I've been solving some time. There are few things I can't understand.

This is my problem:

Because I need to use some Tweens or Timelines repeatedly I decided to create functions with these Tweens/Timelines. These functions are appended to Timeline by .call() or .add() (both doesn't works) like this:

 

var myTimeline = new TimelineMax()

.add(down) 

.call(up)

.add(TweenMax.to("box3", 1, {autoAlpha:0.2, scale:0.8, ease: Back.easeOut} ))

----------

function down() {

   var downTween = new TimelineMax()

         .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} ))
         .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} ))

  } 

-----------

 

No function in myTimeline waits for previous to complete - everything plays together - I'm not used to this behavior. I don't wanna use labels or something like that - I need them to chain (first one ends - second starts) as usualy when I add only tweens into timeline.

 

Well, I tried to resolve my problem by some tricks but meet even more problems :)

1) I tried to use .pause() and then .resume()  or .play() in my functions

 

function down() {

myTimeline.pause();

   var downTween = new TimelineMax()

         .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} ))
         .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} ))

  } 

myTimeline.resume();

 

2) I tried to use onComplete

 

function down() {

myTimeline.pause();

   var downTween = new TimelineMax(onComplete:myTimeline.resume())

         .add(TweenMax.to("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} ))
         .add(TweenMax.to("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} ))

  } 

 

I don't know why nothing works. What do I do wrong? Can anybody give my some explanation, please?

Thanks a lot in advance.

 

Peter

 

 

 

 

 

 

 

Link to comment
Share on other sites

Hi @karpec :)

 

When you create a timeline in a function like that, you'd want to return it to the function and then add() it to your master like this:

myTimeline.add( down() ); 

 

You need those parentheses in the add method. The way you have it now, all the functions are just firing right away so nothing is chaining the way you want it. Here's a basic example of returning timelines to functions and then adding to a master:

 

See the Pen ZLxdXz by PointC (@PointC) on CodePen

See how all the functions return the timeline? This demo also shows how you can use the position parameter when adding them to the master.

 

If you have additional questions, a CodePen demo is the way to get the best answers. Here's some info about that:

Hopefully this helps a bit. Happy tweening.

:)

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

Yup, PointC is exactly right. Those functions were just creating timelines instantly. your myTimeline has no idea what your external functions are doing when you call them. As he said, you need the timelines those functions create to be returned and added to myTImeline.

 

Once you wrap your head around that concept (which can be difficult at first) you'll really appreciate the conveniences that this technique yields.

 

Definitely watch BOTH videos in this article we just put up on CSS-Tricks as it explains in details how to create functions that return timelines and the many benefits.

The first video features an an animation designed and built by a real pro who is also quite the gentleman ;)

https://css-tricks.com/writing-smarter-animation-code/

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

On 18. 10. 2017 at 5:16 PM, PointC said:

Hi @karpec :)

 

When you create a timeline in a function like that, you'd want to return it to the function and then add() it to your master like this:


myTimeline.add( down() ); 

 

You need those parentheses in the add method. The way you have it now, all the functions are just firing right away so nothing is chaining the way you want it. Here's a basic example of returning timelines to functions and then adding to a master:

 

See the Pen ZLxdXz by PointC (@PointC) on CodePen

See how all the functions return the timeline? This demo also shows how you can use the position parameter when adding them to the master.

 

If you have additional questions, a CodePen demo is the way to get the best answers. Here's some info about that:

Hopefully this helps a bit. Happy tweening.

:)

 

On 18. 10. 2017 at 10:05 PM, Carl said:

Yup, PointC is exactly right. Those functions were just creating timelines instantly. your myTimeline has no idea what your external functions are doing when you call them. As he said, you need the timelines those functions create to be returned and added to myTImeline.

 

Once you wrap your head around that concept (which can be difficult at first) you'll really appreciate the conveniences that this technique yields.

 

Definitely watch BOTH videos in this article we just put up on CSS-Tricks as it explains in details how to create functions that return timelines and the many benefits.

The first video features an an animation designed and built by a real pro who is also quite the gentleman ;)

https://css-tricks.com/writing-smarter-animation-code/

Thank you VERY MUCH, guys :-)

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