Jump to content


Error with Callback Functions on a staggerTo animation

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 there,


Having a bizarre issue with Callback functions within a repeating timeline & I can't seem to resolve it!


I'm fairly new to this, but I can't seem to figure out / research what I'm doing incorrectly.


What I'm attempting to achieve is this

  1. animate div in
  2. let it sit for 2 seconds
  3. animate div out
  4. move onto div with same class
  5. rinse / repeat

Like I said I'm fairly novice, but I know I need to use a timeline because I'm planning on stopping the animation at some stage.

Any direction would be greatly appreciated  :-P




See the Pen pEWGJy by Mctowlie (@Mctowlie) on CodePen

Link to comment
Share on other sites

Hello MattOsynlig, and welcome to the GreenSock Forum


To make it pause for 2 seconds you can add a to()_ tween with no target or vars with a 2 second duration.


See the Pen KgyPBa?editors=0010#0 by jonathan (@jonathan) on CodePen


.to({},2,{}) // wait 2 seconds  .to(target, duration, vars)

Then all together added between your two tweens.

var imgLeft = $('.foo');
var imgRight = $('.zen');

var leftTimeLine = new TimelineMax({
  paused: false,
  repeat: -1,
  repeatDelay: -.5

imgLeft.each(function() {
    .to($(this), 0.5, {
      scale: 1,
      opacity: 1,
      ease: Back.easeOut
    }, "-=.5")
    .to({},2,{}) // wait 2 seconds  
    .to($(this), 0.5, {
      scale: 0,
      opacity: 0,
      ease: Back.easeOut
    }, "=+1");

Happy Tweening :)

Link to comment
Share on other sites

I'm not sure I'm understanding the issue fully, but I think one problem is just that Matt had a typo in his position parameter.


"=+1" should have been "+=1"


Using the position parameter properly "+=2" will add 2 seconds of time in between animations and should remove the need to put a dummy tween in the middle




Let us know if you need more help or something different. I'm not sure how this issue relates to the topic of callback functions but perhaps I'm missing something.

  • Like 2
Link to comment
Share on other sites

Thanks Carl, I cant believe i missed that out of order position parameter.. i think Jonny needs a cup of Morning Joe to wake up :)

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