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,

--kevin

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

--Kevin

Link to comment
Share on other sites

  • Solution

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

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