karpec

Thank you very much, Zach ? I appreciate your help.

Hi, guys.

I needed to create animation like this (in principle):

1. animate rectangle in few steps (=in timeline)
2. when finished, run animation BACKWARDS - 2x faster.

But this part is only small part of complex timeline.

I tried to achieve this effect by .reverse() method - in two ways:

1) First, I put .add(t2) followed by .add(t2.reverse()) into one timeline.
I found out that .add(t2.reverse()) overwrite previous .add(t2) - if I understand this behavior well.
However I didn't get what I wanted. This example is represented by blue square in CodePen.

2) So I tried another way - I used onComplete parameter where I called this.reverse().
I didn't expect to get the result that I got. When onComplete is called, red square jumps to initial state without any animation.
I'm little bit confused because when I use only one timeline - without calling timeline in timeline as in example - everything works well.

Can anybody please tell me what I did wrong and show me better approach?

Thank you very much in advance.

Karpec

See the Pen qBBdpor by karpetr (@karpetr) on CodePen

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

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