omnider

I have far from slagging GSAP off, I've been using Greensock since Flash times and it's the best tweening engine I know. BUT Since it moved from Flash, the environment where it behaves the same pretty much on anything, it needed to adapt to different browsers requirements. Not calling this a bug would be like saying that if GSAP didn't add browser specific prefixes to all the CSS atributes it wouldn't be a bug but merely an inability of browser makers to follow the W3C recommendations. Ipso facto, having to hack around css properties on specific browsers to have a smooth animation is a bug and as such should probably be fixed for the sake of saving people time browsing through forums searching for something that everyone would love to have out of the box (or maybe in a form of plugin to save the core size of course ... I don't think IE deserves that much attention anyways ) Just something to consider perhaps

Hi, I got back to this problem after a while and the solution is quite trivial. simply add "rotationZ: '0.01deg'" to the animation and IE seems to be handling everything just fine cheers

Yep, it has to translate from the center. Well technicaly it doesn't. That's why I tried the workaroud with translating from 0 0 and just moving the div along axis, which gives the same result. I can't faster it up unfortunatelly, it has to go this slow. Changing the ease doesn't really help (I actually use linear ease in this case, I just forgot to paste it into the pen) TweenMax has transformOrigin:"50% 50%" set by default, you don't really have to specify it like this (that's the tween in my pen commented under "normal scale"). This post is here basically to explain the IE11 weird behaviour in this particular situation. Changing the look of the tween in any way is not an option and for now we just disabled the scaling effect completely in IE11 .. But I have a feeling that the lack of subpixel animations in IE11 will affect a lot of people and simply disabling all animations that need it isn't an ideal solution.

Well the desired effect is to scale with the origin in the center. Yes, when you move the origin to "0 0" it's flawless, because like I said IE11 doesn't seem to be having trouble with subpixel animation of scaling an object, it rather struggles with animation along axis for some reason.

Hi, I just came across an issue that is not directly related to GSAP but I have a feeling it could affect a lot of people using it. I was getting some "shaking" unwanted effect in IE11 when scaling up an image (either img or div with background-image). After some playing with it I realised the scaling itself is actually fine. IE11 is capable of using subpixel animation for scale transformation, but it cannot (or it appears to) subpixel animate position of an element. I went the usuall way of adding force3D attribute to my tween with no effect. When inspected, the element appears to be tweening decimal values, but the result on the screen doesn't seem that way. I created this pen - http://codepen.io/omnider/pen/EjsJy where you can play with various ways of tweening this. You'll be able to see that the animation isn't smooth in IE11. This doesn't seem as terrible as when you use background image on div with background-size:cover, which can be seen here - http://codepen.io/omnider/pen/waAyg (madness) If anyone could confirm this strange behaviour that would be awesome. Even better if someone could suggest a fix Cheers

Rodrigo: Thanks, I actually tried animating left/top and keeping the scale to 1 but I still had the force3D turned on so the result wasn't any good...I'll give it a go with matrix3d completely switched off. EDIT: Well, due to the lack of subpixel rendering it now looks weird as the flakes are jumping up and down between pixels .. Canvas it is then I suppose...

The flakes are actually being reused when they get off the screen (they just get new x and y), so this should be causing any performance issues. djanes376: The squares are just to show what's going on, in the end there should be bitmaps replacing them (which I assume won't help much with the performance issue either...) The way it is set now is kinda what it needs to look like (number of flakes and size wise), so can't really temper with that neither. Gonna go ahead and try it on canvas ... I'll post a pen with the result once I have it

Hey, Thanks for the suggestion. I was kinda hoping I wouldn't be forced to use canvas (probably as much as I was always hoping not to use stage3D in Flash when I could ) .. But it might be my only option... Unless someone has some magic tricks up their sleeve on this one?

Hi, I've been doing this wee thing that is suppose to simulate a falling snow and I've run into some performance issues along the way. I've made this pen to demonstrate what I'm trying to do: http://codepen.io/omnider/pen/hLkyJ Basically all it does is create a fix number of <divs> and then tweening their x,y,scale,rotationX,rotationY,rotationZ .. I used force3D with no effect one way or the other. Does anybody have any suggestion that could make the things fall a bit smoother? (10 fps on my machine right now) Cheers.

Thanks a lot for that. Brilliant solution as always!

Hi, I've created this little codepen to demonstrate what my problem is. Is there any chance to make the animation smoother? Now you can clearly see the image going from pixel to pixel .. is there any way to do some sort of subpixel animation? So far I've tried this, the same with x/y, turning off the autoRound plugin, none of which seems to do it any good. Any ideas would are appreciated Cheers

Ha! didn't know that. Old habit from AS I guess And it seems to do the trick (loading only TweenMax). Thanks a lot

I just noticed one thing. This specific issue is actually quite difficult to reproduce on powerful machines. It's happening a lot more often on machines where the animation isn't running 60fps... If you have one of those around, it might help

Hi, sorry for the late response. I've created a simple codepen, basically just copying parts of the code from the actual site. If you run the animation certain amount of times I'm sure you'll notice there are some elements missing sometimes. http://codepen.io/omnider/pen/yxgDa I was kinda hoping you were right about other parts of the code messing up with the elements, but since it's happening on codepen as well, I'm really clueless Thanks for any insights Cheers

Hi, I have the following problem when using TimelineMax. I have quite a simple timeline which I create on $(document).ready(function(){}); subLogo = $('.sub-logo'); title = $('.hp .claim'); p1 = $('.hp .p1'); p2 = $('.hp .p2'); p3 = $('.hp .p3'); p4 = $('.hp .p4'); p5 = $('.hp .p5'); cta = $('.hp .cta'); hpTim = new TimelineMax({paused:true}); hpTim.from(subLogo,1,{autoAlpha:0}); hpTim.appendMultiple(TweenMax.staggerFrom([p1,p2,p3,p4,p5],.5,{marginLeft:-1800, ease:Expo.easeOut, delay:1},.2)); hpTim.from(title,.5,{marginTop:-500, ease:Expo.easeOut}); hpTim.from(cta,2,{marginTop:800, ease:Elastic.easeOut}); I play the timeline on $(window).load(function(){}) . Now the problem being is that sometimes, some elements do not tween. They are correctly set by the timeline on its initiation to their positions but then some of them do nothing on the $(window).load function. This is not only specific to this situation I would say as I've seen this behavior before. From the information I provided, can anyone tell me if there is something obvious that is causing the problem? Thanks for any info Cheers

I see, thanks, I was looking at old plugin explorer which had tint "activated in tweenlite"

Hi, I was just wondering if somebody could have a look at my example http://www.omnilong.com/speaker.zip and maybe help me to understand what have I done wrong. Basically it's a speaker component which, using tweenlite, mutes the global sound in any swf it's put in when clicked. Now the thing is working fine when added dynamically from library into swf, however when I took the speaker and placed it on stage in Flash IDE it throws an error "Error #1069: Property tint not found on volume and there is no default value" when hovered with mouse (the speaker should change colour using tint) ... This only happens with TweenLite, not TweenMax. Anyone any ideas? I'm quite happy to use TweenMax instead, I was just wondering what is the reason for this behaviour.

Thanks for your swift replies again guys. some of the stuff you say I already knew, something I was suspecting and something is completely new to me. The thing is that I was playing with the animation so long that after a while even when I created one tween with a rectangle going from one side of the stage to another I saw the same thing that was happening with ones and zeros. Basically I cannot create an animation that wouldn't do that anymore So I guess it really must be something that FP does. Garbage collection sounds like a viable candidate. I'm really curious what the new FP will bring in this area. Anyway, thanks again very much guys for all your suggestions. Thanks Carl for spending so much time playing with it, I really thought I was going crazy

Hi, I'm building a data flow simulation animation and from the very beginning I'm having problems with performance. If you have a look at http://strikermultimedia.com/dev/jerkyAnimation/binary.swf you can see that the animation is fairly fluid but every now and then in gets really choppy/jerky for for me no obvious reason. This is the code that is creating the animation: import com.greensock.*; import com.greensock.easing.*; import com.greensock.events.TweenEvent; Reproductions(); function Reproductions(){ Reproduction(); Reproduction2(); TweenMax.delayedCall(.1,Reproductions); } function Reproduction(){ var Logic:Number = Math.random(); var State:MovieClip; if(Logic > 0.5){ State = new nula(); }else{ State = new jedna(); } State.x = 500; State.y = 500; State.scaleX = 0.2; State.scaleY = 0.2; this.addChild(State); TweenMax.to(State, 5, {bezierThrough:[{x:975, y:55}, {x:1700, y:120}], scaleX:1, scaleY:1, orientToBezier:false, ease:Quart.easeIn, onCompleteListener:DeleteItem} ); } function Reproduction2(){ var Logic:Number = Math.random(); var State:MovieClip; if(Logic > 0.5){ State = new nulaA(); }else{ State = new jednaA(); } State.x = 500; State.y = 500; State.scaleX = 0.2; State.scaleY = 0.2; this.addChild(State); TweenMax.to(State, 5, {bezierThrough:[{x:955, y:30}, {x:1720, y:100}], delay:0.2, scaleX:1, scaleY:1, orientToBezier:false, ease:Quart.easeIn, onCompleteListener:DeleteItem} ); } function DeleteItem(evt:TweenEvent) { removeChild(evt.currentTarget.target); } and just in case this is the .fla file http://strikermultimedia.com/dev/jerkyAnimation/binary.fla . I've read somewhere that bitmapdata are easier to render than vectors but in my case changing vectors into bitmapdata didn't help. Can you please tell me if you see any obvious mistakes? what might be causing the occasional jerkiness of the animation? Any suggestions are much appreciated, Thanks

oh I see, thanks very much for the clarification. Finally got a chance to test it. I'm actually trying to implement LoaderMax within Gaia so I was a bit afraid about having the first frame of each page empty but it actually works fine. By the way do you have any experience with LoaderMax in Gaia? Not 100% sure how to hook it to the Gaia loader If not that's fine, I'm more than grateful for the help you've given me so far

I see, so that's why each swf gets briefly loaded and then cancelled. I was curious about that as well, but that is not what I was talking about unfortunately. For instance when I load the page and watch the network profiler only the first SWF is being loaded but when I click all seven buttons, all seven SWFs are being loaded at the same time. Although the progress listener is only handling the SWF that was clicked the last. So basically it looks like it works fine because all SWFs are being loaded in the sequence I clicked them it seems to me that cancel method (or whatever prioritize() do with the SWFs currently being loaded) doesn't get called.

Hi, the title probably isn't accurate, I'm pretty sure prioritize works fine, I just can't use it. I simply create a LoaderMax queue with 7 sample swfs and I want to prioritize them when you click on a button. The example can be found here : http://strikermultimedia.com/dev/loadermax/main.swf . private function buttonClick(e:MouseEvent):void { trace(e.target.name); LoaderMax.prioritize(e.target.name); //this[e.target.name + "Loader"].prioritize(true); } //----------------------INIT LOADER MAX---------------------------------------------------------------------------------- private function InitLoaderMax():void { //create a LoaderMax named "mainQueue" and set up onProgress, onComplete and onError listeners var queue= new LoaderMax({name:"mainQueue", onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler, maxConnections:1}); //append several loaders queue.append( clip1Loader=new SWFLoader("index1.swf", { name:"clip1", /*estimatedBytes:3000,*/ /*container:this, x:250,*/ autoPlay:false, onProgress:individualProgressHandler } ) ); queue.append( clip2Loader=new SWFLoader("index2.swf", { name:"clip2", /*estimatedBytes:3000,*/ /*container:this, x:250,*/ autoPlay:false, onProgress:individualProgressHandler } ) ); queue.append( clip3Loader=new SWFLoader("index3.swf", { name:"clip3", /*estimatedBytes:3000,*/ /*container:this, x:250,*/ autoPlay:false, onProgress:individualProgressHandler } ) ); queue.append( clip4Loader=new SWFLoader("index4.swf", { name:"clip4", /*estimatedBytes:3000,*/ /*container:this, x:250,*/ autoPlay:false, onProgress:individualProgressHandler } ) ); queue.append( clip5Loader=new SWFLoader("index5.swf", { name:"clip5", /*estimatedBytes:3000,*/ /*container:this, x:250,*/ autoPlay:false, onProgress:individualProgressHandler } ) ); queue.append( clip6Loader=new SWFLoader("index6.swf", { name:"clip6", /*estimatedBytes:3000,*/ /*container:this, x:250,*/ autoPlay:false, onProgress:individualProgressHandler } ) ); queue.append( clip7Loader=new SWFLoader("index7.swf", { name:"clip7", /*estimatedBytes:3000,*/ /*container:this, x:250,*/ autoPlay:false, onProgress:individualProgressHandler } ) ); queue.load(); } The thing is that when I use the Chrome network profiler what happens is that once I click a button it seems that the particular swf really gets prioritized but the rest of swfs are actually still being loaded in the background. Does anyone have an explanation for this behaviour? I'm getting hopeless. Thanks

yeah I know what you mean. well the rollover animations are fairly fast but I think preventing to click during the animation isn't the best user experience...plus the animations are quite complex and there are lots and lots of animations put in one timeline basically so changing the whole flow isn't the smoothest thing to do. Your suggestion is good and makes a perfect sense no doubt, it's just that this whole thing was handed to me by someone else and the way it's been done in the first place is...well...not optimal to say the least. The easiest way to fix the whole thing would be to be able to change the initial attributes of some tweens as I was asking, but since you're saying there's probably no way to do it I'll just rebuild it all:) Thanks

thanks very much for your replies guys. Carl: I don't even know why I was describing the problem so deeply. The question put simply is : let's say I have an MC at x:0 y:0 I use timeline to tween it to x:20 y:20. When I get there I would like to reverse this timeline but so that it returns to different coords, for instance x:10 y:10. In this simple case it doesn't make much sense but it's pretty much what I'm trying to achieve. So basically I'd like to call a function on onComplete for instance that would change initial attributes of the timeline ... hope that makes sense Manic: I've read through the thread and I don't think you were trying to achieve the same I do. Thanks anyway

Hi, another interesting situation occurred I have a timeline which I define and initialize in the constructor of a class. I use this timeline later on in the code when I click a button. The timeline is to animate this button away from stage. The thing is this button also has a onMouseOver event handler that changes it's position and rotation. Somehow I thought the timeline would use the current properties of the object beeing tweened when it's defined (now I realise that it can't work this way). Anyhow, when I want to reappear the button on the stage again I'm using reverse on that timeline which of course tween the button on the stage to the position it was when the mouse was over it, which I don't really want. Therefore my question - is there any way to tell the tweens in my timeline to return to different coordinates on reverse ? some sort of mix of startAt and onUpdate ? ... I'm not sure if I explained the situation clearly enough. Thanks for any ideas