Jump to content
Search Community

execute a function after a .to () in TimeLineMax

Mily31 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



I m Emilie, from France. First I'm sorry for my English.... AND...I am a beginner in JS.


I have read and tried many things before coming, but I think there must be a simple method that I did not understand

I do not find a simple answer to my problem, so i try to find help here with u...


Context :


_ I have a basic timeLineMax :


t1.to(TolosaPlanet,1, {autoAlpha:1, scale:15, ease: Bounce.easeOut, y:0 })

  .to(orangeArrow, 0.5, {autoAlpha:1, scale:1.3,ease: Bounce.easeOut, y: 0})


_And I created a simple function in a .js


function initWriteMachine(divID,charList) {


Question :

How can i simply execute my function after the execution of my TimeLineMax last line ? Currently my function starts directly and does not wait for the end of other insctructions


t1.to(TolosaPlanet,1{autoAlpha:1scale:15ease: Bounce.easeOuty:})

  .to(orangeArrow0.5{autoAlpha:1scale:1.3,ease: Bounce.easeOuty0})

    .play my function ??
Thank you for helping... little null
Link to comment
Share on other sites

Hi Mily31,


Welcome to the forums!


There are a few ways to accomplish what you are looking for.


The simplest one would be a .call() at the point you want your function to be triggered.

t1.to(TolosaPlanet,1, {autoAlpha:1, scale:15, ease: Bounce.easeOut, y:0 })
  .to(orangeArrow, 0.5, {autoAlpha:1, scale:1.3,ease: Bounce.easeOut, y: 0})
  .call(initWriteMachine, [divID,charList])

From the docs:

.call( callback:Function, params:Array, scope:*, position:* ) : *

Adds a callback to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.delayedCall(...) ) but with less code.




Link to comment
Share on other sites

I just figured out why I did not succeed before. My function works, but


The following does not launch (.to (blabla). A problem with the content of my function?


function initWriteMachine(divID,charList) {

var charListText = charList.split('')//;
var divDuTExt = document.getElementById(divID);

for(var i= 0; i < charListText.length; i++)
divDuTExt.innerHTML = charListText.join("</span><span>");
TweenMax.staggerFrom('span', 0.01, {opacity: 0}, 0.1);


Link to comment
Share on other sites



An example with 3 squares and two text box, the three animations from the beginning work:
Red square animation ok
At the end of it:
Square blue animation ok
At the end of it:
Phrase 1 appears ok
But here, green square moves without waiting for the end of the execution of my text function,
It starts at the same time as the text. I would like it to wait for the end of loop.
If I add another text at the end of my timeline
.call (initWriteMachine, ['contentText2', txt2])
Ouinnn !!!

See the Pen xRPzOM by Mily (@Mily) on CodePen

Link to comment
Share on other sites

Thank you. It does make a lot easier to see what is that you are after and what is going wrong.


In your case, you are not telling the timeline to wait until whatever is happening in the function before continuing. Again, there are several ways to achieve this, one of them is the bellow.


See the Pen yVPqgr?editors=0010 by dipscom (@dipscom) on CodePen


It makes use of the callback of the .staggerFrom() method.

  • Like 1
Link to comment
Share on other sites

Ah, that feisty Dipscom foiled my plan again!


Yup, he definitely solved the big problems, most importantly that the timeline needs to be paused and resumed.

The timeline has no idea how long the function from the call() is going to take or if it is creating new animations that themselves take time.


I have a slightly different fix that addresses the following from the original pen:


- the staggerFrom should not occur inside the loop. currently it is being created multiple times for each character

- if you use 'span' as the target of the staggerFrom it will use every span on the page. it should be more specific.


Dipscom paused the timeline when the function was called but I used the TimelineLite's addPause() method with a callback.

addPause: http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/addPause/


Frankly, both ways are fine.


function initWriteMachine(divID,charList) {

    var charListText = charList.split('');
    var divDuTExt = document.getElementById(divID);

    for(var i= 0; i < charListText.length; i++)
        divDuTExt.innerHTML = charListText.join("</span>          <span>");
      // you don't want to do a staggerFrom on each iteration of the loop
      // also if you select every span tag on the page you will mess up other spans
      //  TweenMax.staggerFrom('span', 0.1, {opacity: 0},          0.1)

  //do staggerFrom AFTER loop and resume timeline when done
  //params: target, duration, vars, stagger, onCompleteAll
  TweenMax.staggerFrom("#" + divID + " span", 1, {opacity:0}, 0.1, function() {t1.resume()});
var txt1 ="Bonjour";
var txt2 ="I m a Noob";

var p1 = document.getElementById('red');
var p2 = document.getElementById('blue');
var p3 = document.getElementById('green');

var t1 = new TimelineMax();

t1.to(p1,0.2, {autoAlpha:1, scale:5, ease:                   Bounce.easeOut, y:0 })
  .to(p2, 0.2, {autoAlpha:1, scale:8,ease:       Bounce.easeOut, y: 0})
  //pause the timeline and call a function
  .addPause("+=0", initWriteMachine, ['contentText1',txt1])
  .to(p3, 2, { top:"-=200px"})
  .addPause("+=0", initWriteMachine, ['contentText2',txt2])



Also, if you don't need each character to fade in and just want a basic type-writer effect our TextPlugin makes it really easy:


t1.to(p1,0.2, {autoAlpha:1, scale:5, ease: Bounce.easeOut, y:0 })
  .to(p2, 0.2, {autoAlpha:1, scale:8,ease: Bounce.easeOut, y: 0})
  .to('#contentText1', 1, {text:txt1})
  .to(p3, 2, { top:"-=200px"})
  .to('#contentText2', 1, {text:txt2})




TextPlugin needs to be loaded separately.

  • Like 1
Link to comment
Share on other sites

Thanks to you, with your examples, I could understand, improve my code:

See the Pen RoxKWK? by Mily (@Mily) on CodePen

Now I try to solve another problem, as the before time of the basic principles are not acquired.
I continued my time line, with an element with yoyo
Same problem, the instructions following these yoyos do not launch! CEla said, this is normal since it is a yoyo and repeat-1 ...
So I'm looking for the best solution for the time line to continue, keeping this yoyo, I tried .Add (label, timedelai) and more but ...
Here is the new codepen but I keep looking... Is this because of .to? IDK !

See the Pen yVpVwq by Mily (@Mily) on CodePen



Thank you for your help, bad in dev, but strong in the kitchen if I can send you something food from france in exchange: D

Link to comment
Share on other sites

The problem is that new animations get placed at the end of a timeline. If you have animations that repeat forever, there really is no end.

Since you are already using labels (very good) you can just add the pink animation relative to the text2 label like:


  .to(yoyoyellow,0.2, {x:"+=10",y:"+=50",rotation:"+=10", ease: Power0.easeNone , yoyo:true, repeat:-1},"text2")
        .to(yoyoyellow,0.2, {x:"-=5",y:"-=50",rotation:"-=10",ease: Power0.easeNone , yoyo:true, repeat:-1},"text2")
  .to(pink,1,{top:"+=50"}, "text2+=1"); // one second after text2



or at any absolute time

to(pink,1,{top:"+=50"}, 5); // 5 seconds after timeline begins
  • 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...