Search the Community

this is my first attempt using GSAP (it seemed to be the best animation library I could find). I'm trying to create a simple slot machine. Here is a codepen with the minimal amount of code. http://codepen.io/dax006/pen/LGoNrE It does 3 things. After creating a random symbol, it 1) creates a 'constantly spinning' tween and saves it 2) creates a 'slowing' tween and saves it 3) resets the progress of each tween/symbol to be 1/4th down the screen. Bug/problem #1 - Tweens are playing yet NOWHERE do I play() the tween. The tweens are PAUSED by default. Even if they are not paused, I IMMEDIATELY pause() them in resetslot(). Problem #2 - Progress() does not seem to be setting all symbols accurately (you can immediately see that the top symbol is askew) Problem #3 - Setting a tweens progress() to zero triggers its onComplete (watch the console) Problem #4 - Setting a tweens progress to 1 triggers its onComplete even though I have SuppressEvents:true (watch the console) I'm very frustrated with GSAP at the moment . Any help is appreciated -John Edit:problem 5 can't pause the codepen demo so can't read console

One really nice way to clean up your HTML is to get rid of inline SVGs and opt of object tags like this: <object id="mySVG" type="image/svg+xml" data="images/PrettyArt.svg"></object> The problem with this, is that it is technically a separate document. So the following doesn't work... TweenMax.to("#myObject",.5,{opacity:1}); It would just fail to animate, and worse, it would fail silently so I had no clue why it was failing! To make this easier to handle, it might be nice to either have some sort of logging if it doesn't find the queried object. OR the ability to either include a specific target document to query. One way to achieve this, would be to "register" the SVG document with TweenMax. Something like this: TweenMax.register("#mySVG"); In this case, TweenMax would query the current document for "#mySVG", it would find the object tag and include this document to also traverse if no objects were found in the root document. Obviously, this would work great for including one document, but multiple documents per page could be used. And that would muddy up the results of the query selector. So maybe another strategy should be used instead. What if you could force which document you want to select from... for example what if you could add a fourth/optional argument? Like this: TweenMax.to("#myObject",.5,{opacity:0},"#mySVG"); This would allow you to optionally include another document or a list of documents to query.

var imgLoader:ImageLoader = new ImageLoader("data/img/global_ui/blue/ButtonStd1.jpg", {onComplete : onComplete}); var imgLoader2:ImageLoader = null; imgLoader.load(); var tempBD:BitmapData = null; function onComplete(evt:LoaderEvent):void{ tempBD = imgLoader.rawContent.bitmapData; tempBD.dispose(); // imgLoader.dispose(true); imgLoader2 = new ImageLoader("data/img/global_ui/blue/ButtonStd1.jpg", {onComplete : onComplete2}); imgLoader2.load(); } function onComplete2(evt:LoaderEvent):void{ trace(imgLoader2.rawContent.bitmapData.height); } If I comment dispose(true), onComplete2 will give and error. GreenSock ImageLoader does not check if the bitmapData is being disposed or not before sending.

I'm using a simple animation on a object TweenMax.fromTo($('#navigation .active-field'), actFieldSpeed, {css: {top: ((index - 1) * 1.5) + 'rem', backgroundColor: prevColor}, immediateRender: true}, {css: {top: ((index ) * 1.5) + 'rem', backgroundColor: altColor}}) Problem is, that it leaves traces of of object's background in WebKit-based browsers under reverse animation. What can be cause of that? http://studijaodri.lt/klientai/musu/#digital_agency

We have created a pretty crazy scrolling animation (link below). As you scroll it triggers zooms, opacity changes and movements, and the animation is pinned, so it responds quite differently than most scrolling websites that use a parralax visually. It seems to be testing really well across most platforms, but seems to run into some big issues in firefox exclusively for a macbook. Firefox works perfectly on pc laptops, desktops, and mac desktops. I am thinking it may have something to do with the trackpad, but still can not identify the issue. Any thoughts? Appreciate it in advance! www.housingopensdoors.ca/DEV_merged

I´m using a lot of features of TweenMax in flash game project like: - Delay calls. - Tween Proprieties and Variables. - Tween call functions in onUpdate/onComplete/onStart feature - Tween filters, color matrix and so on - Scale around point In some game features like: - Apply/Remove/Animate effect - Damage Controls Timers - Auto Time Control in Status Effects - Show/Hide/Animate Interfaces Arts - Show/Animate Damage art Splashes and Damage Text - Other Attributes Timers - Other Object Animations I have had huge problem that appear after i implement TweenMax for the animations in the game. The problem is: - Tweens animations, delayed calls stop in the middle of the animation or do not call functions after time is complete (in case of delayed calls). Objects that are being animated simply stop with the last value before Tween freeze. There is no error shown in debug mode and the problem happen randomly making no distinction of witch Tween is being done. Generally, all Tweens that are going in a same particular time freezes together. After one or multiple Tweens freezes other tweens called after works normally. But objects they were being animated by a frozen tween never get updated again, some times even if a Tween is called again or other tween takes places. Some examples: - Damage number appearing with damage splash stop in the middle of path and do no fade away with a code like that: TweenMax.to(spriteArt.container, 1, { startAt: { y:-30, dropShadowFilter:{color:0x000000, alpha:1, blurX:4, blurY:4, strength:5.5, distance:0} }, dropShadowFilter:{color:0x000000, alpha:1, blurX:4, blurY:4, strength:8.5, distance:0} , y:-105, alpha:0, ease:Back.easeIn, overwrite:false, onComplete:remove} ); - Yoyo animation of a filter (damage invulnerable effect) that make a object twinkle stop in a random value and never continue again with code like that: DamageInvunerableTween = TweenMax.to(thisObjectArt, 0.15, { colorMatrixFilter: { colorize:"0xffcc66", amount:"0.3", contrast:"1.3", brightness:"1.3" }, ease:Quad.easeInOut, overwrite:false, repeat: -1, yoyo: true } ); - A interface element (like game over screen) do not appear or appear half transparent with code like that: TweenMax.to (_movieClip, 2, {startAt: {alpha:0}, alpha:1, onUpdate:updateBitmap, onStart:setAnimating, onStartParams:[true], onComplete:setAnimating, onCompleteParams:[false]} ); - Some systems features stop to work when they use TweenMax for some reason (like delayedCalls): applyStatus("ShieldDamaged", true); TweenMax.delayedCall(time, removeStatus, ["ShieldDamaged", false]); The big problem is the game simply do not work when player plays for more than few minutes because some of this freezes happen and broke the gameplay or some effect or some animation. First, i though i was using TweenMax overly and then i reduce a lot the use and the creation of new tweens but make no difference. Some times there is a problem with other event Listners in the code like: art.contentLoaderInfo.addEventListener(Event.COMPLETE, onSephiusArtLoaded); That make event.Complete or any other event not being dispatched and giving no error what so ever. The most strange thing is there is no error appearing in debug when this things happen so there is no way to find what is happening. The Tween/Event simply stop or not happen. I´m under lot of pressure because i should launch a demo for the project backers in 2 weeks and i still have no clue how to solve this catastrophic problem. I can give repository access if necessary to test and see in action the problem happening. Please help us!