Jump to content
Search Community

Tween duration is being ignored

PawleyBoboli test
Moderator Tag

Go to solution Solved by PawleyBoboli,

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 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,


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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. visibilityinherit;
  2. opacity1;
  3. transformtranslate3d(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 


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


Link to comment
Share on other sites

  • Solution



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.



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