daneiran

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

Jack, Rodrigo, Thank you, thank you for your excellent suggestions!! We were indeed using an outdated Pixi. Would have gotten back sooner but there was a lot of refactoring to do today. The solution of simply using the object itself (instead of object.position) was in fact the best solution in our case. Generally speakikng, it could help matters greatly if there were a consistent way to poll for version number of these JS libs to make it easier to understand which codebase(s) we are using. With GSAP JS this hasn't come to the fore yet in development the same as it has a few times already for PixiJS, however it would be good if all these libs had a simple version(); call that reported a number that ticks up (i.e. maintained together) with each build release. That would put developers directly in touch with what they were using. We could even poll this vn, perhaps even strategically, within the downstream use codes. At any rate, one for the wish-list. Thank you so much for the excellent support. We are big fans for these exchanges that helped make our rocket animation better with the autorotate. Go GSAP!!

Sorry, here the codepen: http://codepen.io/bwind/pen/Khqvg

Could you explain the changes? I made a codepen, finally. Sorry it took some time--had to figure out how to code it up in there. When I try to remove '.position' from line 55 of the JS thereon, autorotate still does not happen. Was there more to it than that? Thanks ahead.

We can do that. Have a project meeting in 5 minutes, but I should have some time immediately afterwards to post something so far. Haven't used codepen as yet. The lines of pixi code are pretty minimal for the demo. Probably 3-5. Thanks so much for the quick replies, and no definitely don't go outside of the GSAP development. I think it's close, just something not quiite aligning. Will get back to you with that demo in another hour or three if meeting goes to plan.

tried it and so far no dice. same translating but no rotating. could it be something we're doing? (as this seems like it should work.) #1 concern we came up with is how we are defining "the div". The suggestion as i understood was to add this seperate animation "item" (div) to run in parallel and basically grab its rotational properties to feed the actual pixi item we wish to rotate. this seems ingenious and certainly plausible. now just the devil in the details. This how we defined the div rotation of which we capture in the (separate) TweenMax shown above: <canvas id="our-canvas" width="960" height="500"><div id="dummy-div"></div><!-- <--KLUDGE --></canvas> (We tried it a couple of ways outside of the canvas tag as well, with similar results of translate-only; no rotate.)

Sorry, if it helps for completeness, this is kzRocket. Just a sprite object made in the standard Pixi way out of a png: var kzBgX = 172; var kzBgY = 25; var texture1 = PIXI.Texture.fromImage("resources/rocket.png"); var kzRocket = new PIXI.Sprite(texture1); kzRocket.position.x = kzBgX - 30; kzRocket.position.y = kzBgY + 140; this.stage.addChild(kzRocket); It seems like for some reason autorotate is compatible with Kinetic but not Pixi? This is our first project trying to use greensock. We had committed to the Pixi renderer b/c of glowing reviews like you mentioned. It seems like the above code should work, no?

We definitely tried true, and many other combinations, but no happiness with autorotation so far after several hours. The best we can do is get it to follow the spline, but that looks strange for our animation without the autorotation capability. Do you have any other ideas for us? (Thanks ahead!!) var kzBgX = 172; var kzBgY = 25; TweenMax.to(kzRocket.position, 10, { bezier:{ values:[ {x:(kzBgX-30), y:(kzBgY+140)}, {x:(kzBgX+215), y:(kzBgY+50)}, {x:(kzBgX+388), y:(kzBgY+30)}, {x:(kzBgX+493), y:(kzBgY+15)}, {x:(kzBgX+528), y:(kzBgY-10)}, {x:(kzBgX+453), y:(kzBgY-50)}, {x:(kzBgX+443), y:(kzBgY+5)}, {x:(kzBgX+473), y:(kzBgY+30)}, {x:(kzBgX+503), y:(kzBgY+40)}, {x:(kzBgX+570), y:(kzBgY+50)}, {x:(kzBgX+830), y:(kzBgY+50)} ], autoRotate:["x","y","rotation",0,true] }, repeat:-1, repeatDelay:3});

Has anyone been able to make a demo like this one: http://codepen.io/GreenSock/pen/Kajpu only using Pixi instead of Kinetic? We are using Pixi and can make an object follow the spline path, but it will not auto-rotate to actually align with the path no matter what we do. Any help would be greatly appreciated.