Tween duration is being ignored

[PawleyBoboli 10 Likes (Newbie)]

Hi Folks,

 

So sorry I couldn't find a solution to this problem searching  these archives, and worse... my codepen works perfectly... but I have an autoAlpha Tween which is just cutting on without any fade up in my project.  This happens no matter what duration I add to it.

 

Basically, on a button click, I am changing the HTML contents of a div and then executing a fade up.  I thought possibly the chop-on of the div might be due to the text change hadn't completed when the fade begins, but in my codepen it works.  Something else is causing this fade to chop-on.

 

I will say that my project has many things going on during this trigger, including other GSAP transitions, and loading a video into a Brightcove player.  However, The chop-on only happens for just this footer DIV on this one event, and all other transitions are nice & smooth for other events.  I have even tried putting a long delay on this fade-in, thinking it would work after some other things are done (like the video is well under way) but it continues to chop-on instead of fade.

 

Any ideas or leads are greatly appreciated.  thanks,

--kevin

See the Pen eNNEvM by PawleyBoboli (@PawleyBoboli) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Just curious: does it help if you add force3D:true to your elements that you're fading up? You can do it all at once, like:

TweenLite.set("#evstLabelGroup, ...", {force3D:true}); //only needed once, at the beginning.

This merely forces most browser to "layerize" the element(s) which shoves them into a GPU layer, making it easier for the browser to manipulate the pixels quickly. 

[PawleyBoboli 10 Likes (Newbie)]

hmmm... this does something, but not what I was hoping for.  Using force3D: true keeps the div from displaying at all, even though in GC Devtools the layer element style says:

 

element.style {

1. visibility: inherit;
2. opacity: 1;
3. transform: translate3d(0px, 0px, 0px);

}

 

The layer's setting for display: is already set to 'block' in my stylesheet, and if I toggle the transform in the Devtools window the layer group displays when the transform is turned off... but my transition is still getting chopped for whatever reason.  This is such a weird hair-puller, especially since everything else is working so great.

 

In my project this footer-div is supposed to fade in and out depending on user interaction, hence the if/else toggle in my codepen.  I've altered the codepen to toggle back & forth 

See the Pen eNNEvM by PawleyBoboli (@PawleyBoboli) on CodePen

 

New things I've tried - none of which worked:  

• Put the transition into a timeline and use myTL.play() and myTL.reverse() instead of the straight tweens (same result... the div block just chops on/off)
• Tried to execute the tweening function after a long delay, hoping that whatever was making it choke was completed: 

  TweenLite.delayedCall(4, EV_swapBadgeIn, ["toCourse"]); 

  After the delay time, I still get the same result and the div chops-on/off.

• As a test, I change the div being faded to something else on the page and the fade worked.  There must be something funky going on with this particular div. 

 

I'll keep digging

--Kevin

[PawleyBoboli 10 Likes (Newbie)]

z-index.

 

That was the problem.  The z-index of this div was not set and it was being blocked by another div during the transition.  I knew it was me and not GSAP.

 

Boy I'd like to get those hours back.  So embarrassing.  Sorry for the noise.

 

--Kevin

[GreenSock 8,117 Likes (Superhero)]

Glad you figured it out. We have all had those days. Thanks for posting back.