Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
daneiran

onComplete not working in IE11

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

Greetings, 

 

we have a site with animated buttons. The buttons are supposed to slide in and not become interactive until the reach their target resting spot.  However, they demonstrably become active right away.  This is in IE11 on Windows 8.  The interactive flag is a property of the pixi object we are animating.  We tried a number of different ways to specify the above but none worked to solve the issue of the onComplete firing immediately under these conditions; not even using the latest 1.11.8 TweenMax.js Browsers other than IE 11 appear to work fine. 

 
And no, we did not put parens after onComplete, as that appeared to be a common mistake according to forums. We also tried both From and To tweens, that did not change anything . Here is the code. 
 
 ...
   var tLadv2 = zq.sAn['tLadv2'] = new TimelineMax({onComplete: makeAdvButtonInteractive, onCompleteParams: [2]});
  tLadv2.from(zq.sSp['advBtn2'], 0.36*tEslideR, {x:(gsf*(advBgX+7+115-1000)), ease:Power1.easeOut});
  tL1.add(tLadv2, (6*tEdelay));
  var tLadv1 = zq.sAn['tLadv1'] = new TimelineMax({onComplete: makeAdvButtonInteractive, onCompleteParams: [1]});
  tLadv1.from(zq.sSp['advBtn1'], 0.2*tEslideR, {x:(gsf*(advBgX+7-1000)), ease:Power1.easeOut});
  tL1.add(tLadv1, (7.2*tEdelay));
 
 function makeAdvButtonInteractive(advBtnId) {
        zq.sGr['advF'+advBtnId+'Mask'].interactive = true;
}
 
Any advice would be appreciated.  Thanks ahead!!
Link to post
Share on other sites

Other than setting interactive = true in the onComplete callback have you tried running any other code to verify that the onComplete is firing prematurely? I'd suggest a simple 

console.log("tween complete");

It would be very strange that an onComplete wouldn't work in IE11

 

Another helpful test would be to remove the onComplete all together and see if the button is still interactive prematurely.

 

In other words I'm trying to rule out the possibility that something else in your code isn't causing these buttons to be interactive.

 

If there is still a problem feel free to post a basic example to CodePen so that we can actually see what is going on in all your code. You just need to provide enough code to replicate the issue. A single tween on a single button in your timeline should suffice.

 

Instructions on creating a CodePen demo with GSAP are here: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

  • Like 2
Link to post
Share on other sites

Here is a codepen example using a to() tween with a onComplete()

 

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

 

I tested this also in IE9, IE10, and IE11 and the onComplete callback fires like expected.

 

:)

Link to post
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.

×