Strange Tween Behavior With Group (divs of x class)

[captainJak 1 Likes (Newbie)]

The two tweens below fade in a group of divs, but the problem is each fades in with more time between the last as it progresses (almost like it's exponentially slowing). And both tweens below fade in the first two divs at the exact same time with no stagger (hence "faking" it with the delay on the second).

 

Any idea why? How can I get a group of divs with the same class to fade in, one by one, with the same uniform delay between the first two and the rest? Thanks in advance! 

 

/* this one doesn't work in a linear fashion */

TweenMax.staggerFromTo($("#overlayFrame"+nextFrame+ " .hotSpot"), 1.5,{opacity:0},{opacity:1},2);

 

/* this one doesn't work in a linear fashion */

var tl = new TimelineMax()

tl.add(TweenLite.to($(".courthouse"), 1, {opacity:1}));

tl.add(TweenLite.to($(".hospital"), 1, {opacity:1,delay:1}));

tl.add(TweenLite.to($(".jail"), 1, {opacity:1}));

tl.add(TweenLite.to($(".park"), 1, {opacity:1}));

tl.add(TweenLite.to($(".cafe"), 1, {opacity:1}));

[Jonathan 5,176 Likes (Superhero)]

Hello captainJak, Welcome to the GreenSock Forums

 

You can try using the special property immediateRender: false if using staggerFromTo() .. this is due to from tweens by default, render immediately when ceated.

 

Example:

See the Pen oJgud by jonathan (@jonathan) on CodePen

TweenMax.staggerFromTo($("#overlayFrame"+nextFrame+" .hotSpot"), 1.5,
       {opacity:0, immediateRender:false},
       {opacity:1}
,2);

immediateRender : Boolean - Normally when you create a tween, it begins rendering on the very next frame (update cycle) unless you specify a delay. However, if you prefer to force the tween to render immediately when it is created, set immediateRender to true. Or to prevent a from() from rendering immediately, set immediateRender to false. By default, from() tweens set immediateRender to true.

 

http://api.greensock.com/js/

 

Does that help?

[captainJak 1 Likes (Newbie)]

 

 

does that help?

 

That didn't do it (see attached gif for example). 

 

TweenMax.staggerTo($("#overlayFrame"+nextFrame+ " .hotSpot"),2,{opacity:1,immediateRender:true}, 2);

 

[captainJak 1 Likes (Newbie)]

 

does that help?

 

Thanks for the help by the way. 

[Jonathan 5,176 Likes (Superhero)]

Is there a way you can setup a

See the Pen by pen (@pen) on CodePen

or jsfiddle example or just fork the example i made above to show us your code (HTML,JS, CSS) ??

 

fork this if you want:

See the Pen oJgud by jonathan (@jonathan) on CodePen

 

thanks!

[captainJak 1 Likes (Newbie)]

Is there a way you can setup a

See the Pen by pen (@pen) on CodePen

or jsfiddle example or just fork the example i made above to show us your code (HTML,JS, CSS) ??

 

fork this if you want:

See the Pen oJgud by jonathan (@jonathan) on CodePen

 

thanks!

 

Yep: 

See the Pen GieCp by captianJak (@captianJak) on CodePen

Thanks!!

[Carl 9,066 Likes (Superhero)]

Thanks for providing the codepen.

 

It would help to have reduced test case as I gather that 90% of that html and js is not related to the problem and it makes it difficult to focus on the issue. 

 

That said, I think your staggerTo() tween on line 57 is just starting too early. 

What I'm seeing is that the first and second item seem to appear at the same time because other items that are fading out are covering them up. 

 

In other words, by the time the first and second items can be seen, their animation is already complete.

 

I changed the tween in line 57 to have a delay and added some rotation to make it clearer which items were being effected by that tween.

 

check this fork: http://codepen.io/GreenSock/pen/aiowx

 

If that doesn't help, please consider removing all code that isn't related to the issue. It will make it much easier for us to investigate.

 

thanks!

[captainJak 1 Likes (Newbie)]

Thanks for providing the codepen.

 

It would help to have reduced test case as I gather that 90% of that html and js is not related to the problem and it makes it difficult to focus on the issue. 

 

That said, I think your staggerTo() tween on line 57 is just starting too early. 

What I'm seeing is that the first and second item seem to appear at the same time because other items that are fading out are covering them up. 

 

In other words, by the time the first and second items can be seen, their animation is already complete.

 

I changed the tween in line 57 to have a delay and added some rotation to make it clearer which items were being effected by that tween.

 

check this fork: 

See the Pen aiowx by GreenSock (@GreenSock) on CodePen

 

If that doesn't help, please consider removing all code that isn't related to the issue. It will make it much easier for us to investigate.

 

thanks!

 

Sorry about the extra code. Assumed might as well keep it in case something is conflicting that I wasn't aware of. That did it and makes perfect sense. Thanks for the help!