Jump to content
GreenSock

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

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

 

Cheers!

Matt

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() {
  leftTimeLine
    .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

 

http://codepen.io/GreenSock/pen/VKAwRj?editors=0010#0

 

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.

×