stagger tweening

[nicodev]

Hi,

 

I think I miss something. I am trying so make a simple stagger animation of speech bubbles with staggerTo. Just would like the each item to disapear before another comes. Is there a way to add a callback function or something else to do this ? See my pen. Thanks for helping. 

 

var $temoignage = $('.temoignage'),
tlTemoignages;

tlTemoignages = new TimelineMax({ 
  repeat: -1,
  repeatDelay: 1 }); 

tlTemoignages 
  .staggerTo($temoignageTexte, 2, {autoAlpha: 1, x: 100, ease:Power3.easeOut}, 1);

 

See the Pen BKgVPV by ndevaux (@ndevaux) on CodePen

[Dipscom]

Yes, there is.

 

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

 

 

Check out the docs for any of the stagger methods. Scroll down a bit and you will see a detailed explanation on how they work. There is one example that is exactly what you are asking about.

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerTo/

 

 

Just watch out for the gotcha. Even though you can pass "{self}" as a parameter, for some reason, I had to add ".target" to the element being passed, otherwise it would not Tween. I do not know why that is but I can see the logic behind it. As I guess the "{self}" parameter is referring to the actual DOM node... Hopefully Jack will swing by and give us an explanation as to why that is the case.

[nicodev]

You rock ! Thanks a lot !

[GreenSock]

Yep, {self} would be a reference to the tween instance itself (not the target). That's why you had to add ".target" to it, to reference the tween's target (the DOM node in this case)

 

Another way you could do this is with another staggerTo() call instead of callbacks. You just delay those tweens a bit so that they line up where you want. This way, all the animation is inside a single timeline instance that you can easily seek(), reverse(), timeScale() or anything like that:

http://codepen.io/anon/pen/aNgRWz?editors=0010

 

Notice I created some variables at the top that you can play with for the timing of all the staggers, durations, etc. 

 

Happy tweening!

[piyush walia]

Thanks a Lot Carl. I was struggling with the same question and it solved my problem.