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