Jump to content
Search Community

Strange Tween Behavior With Group (divs of x class)

captainJak 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

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}));

Link to comment
Share on other sites

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? :)

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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!

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