Jump to content
GreenSock

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

Tweeting Large images slowly

Recommended Posts

HI there

I am working on a banner and I have a panning image that is 420 pixels wide and 400 pixels high.  The duration of the tween is 5 seconds.  Any hints as to how to make the image pan smoothly, it is looking very jittery.

 

here is my code:

 

tt(image1,5, {left:0, ease:Power4.easeOut, force3D:false})

 

thanks in advance.

 

I am being told I should use CSS @keyframes for the animation but I'd rather stick to greensock animation as it's what I am more comfortable with.

Link to comment
Share on other sites

Have you tried using x instead of left so you can take advantage of sub-pixel rendering?

  • Like 3
Link to comment
Share on other sites

Sadly there is no simple solution today for this miserable browser jagginess behaviour. You have to try everything with everything until all the browsers do what they are intended to do. This is the part of my browser dependency script which is forcing all the kludges to move and rotate their DOM elements smoothly. Stage is the main container <div>
 
switch ( BROWSER ) {
    case 'IE':
        TweenLite.to( Stage, 0.01, { rotation: 0.01, force3D: true, perspective: 1000 } );
    break;
    case 'Firefox':
        TweenLite.to( Stage, 0.01, { rotationZ: 0.01} );
    break;
    case 'Chrome':
        TweenLite.to( Stage, 0.01, { rotation: 0.01, force3D: true, perspective: 1000, transform: 'translate3d(0, 0, 0)' } );
    break;
}

Additionally: You have to traverse recursively all the elements and call 
TweenLite.to( e, 0.01, { rotation: 0.0001 })

 in case of Safari and Firefox.

 

These values are far from perfect. I didn't have the patience to toy with the various settings, just stopped figuring out them when they finally worked.

Link to comment
Share on other sites

Hello Oliver15Years, is there any reason why your mixing the transform property with the rotation property.

 

I would highly recommend that you either animate using x, y, z, rotation or use the transform property with rotation inside that string, but not both.

 

Since your telling GSAP to use rotation and also overwrite that with the transform property with a value as a string.

 

Also just so you know Good Sir, rotation and rotationZ are the same thing in GSAP. So rotation will perform the same in Firefox as rotationZ. ;)

 

:)

  • Like 2
Link to comment
Share on other sites

Thanks Jonathan :)

Time to rewrite this code snipplet based on Your advices. Moreover would be nice if we could figure out the best and shortest settings for various browsers. 

These lines are layers of my frustration while I was trying to fix the jaggy movements, rotations and strange disappearances. There was already a tranfrom here and a rotation there. When I was trying to fix a new jagginess, I just appended something which fixed the new issue and left them there. They are not logical or nice but somehow working. Sadly I forgot to save the ads where the various pixel snappings occured, so hard to rewrite the code without the test cases. 

Oliver

Link to comment
Share on other sites

Usually rotation:0.01 should do the trick on making it translate smooth. But if the images is really large in dimensions, and or your animating several large images at once. That is just the nature of the browsers limitation on having to move and paint all those pixels around at once.

 

Just make sure that before you animate the images that the DOM is ready and Window is fully loaded.

 

Happy Tweening :)

Link to comment
Share on other sites

Usually. Initially I just used this little rotation trick but it isn't worked in many cases. And there are rotations when the rotated element is in a container div which is scaled by the X axis, and the jaggyness appears again. And there is a Safari which is swallowing the display element while it's moving if it is scaled or rotated and so on :D Generally if I put something in a container <div> I have to hack the appearance again by setting various values with .set .

  • Like 1
Link to comment
Share on other sites

Basically the rotation:0.01 trick only works on elements that are translating in x and it y.

 

If you your doing other rotations than you can also try z:0.01 .. try not to set un-needed transforms even at 0 for elements your not animating or that don't need it.. since the presence of the transform even at zero can add un-needed painted layer.

 

;)

  • Like 1
Link to comment
Share on other sites

I ran into this issue as well using GSAP back in March. It was a rather large image but not too large, not fullscreen width or anything (for a banner, was something like 800x600 or along those lines). Tried all the suggestions above and everything I could find online etc. The small rotation trick didn't work either. It was a simple pan with easing left to right fairly slow but not too slow. No clue why GSAP couldn't handle it. Now it wasn't terrible or even bad looking, and most eyes couldn't tell, but not even close to how smooth CSS did it.

Animating it with CSS ended up being the only really smooth solution. 

 

Link to comment
Share on other sites

Hello davi, i would really be interested in seeing a codepen with this behavior if you can using that same image. Was the image animating using translate3d or matrix or matrix3d? I have never experienced that before, since the browser is what is interpolating the CSS properties via JS. Also what browser and browser version did you see this on? This way we can see what it its behavior look like, thanks! :)

Link to comment
Share on other sites

Hey Jonathan,

Here you go. Sorry, it’s a bit sloppy, just copied and pasted some parts that were relevant and quickly adjusted. The GSAP version isn’t how it was originally created but it used this 3-step kinda tween (it’ll do the same thing with a single straight forward tween though). However, good enough to see the comparison. I’ve also added the lil rotation trick too. Think I made a bunch of different variations of this to try and figure out why. Any who, if you look at both, the CSS version is clearly a lot smoother (in Safari at least).
 
Right now, I’m on my older late-2013 iMac Non-Retina (but it was top of the line at the time, so it’s not a slow computer by any means). However, think I remember seeing the same issue on my brand new MBP. Currently viewing it on the latest version of Safari, which it certainly does it in. Think it’s fine in Chrome. Can’t remember exactly what browsers I was having issues with at the time though (this was back in March when I originally created this). If CSS is doing it better in more browsers, then CSS is what I’d be using’.
 
GSAP >

See the Pen bZzEJg by Davi-T (@Davi-T) on CodePen

 
CSS >

See the Pen RRvApO?editors=1111 by Davi-T (@Davi-T) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks davi for taking the time to create both codepen examples, so we can compare them. Much appreciated ;)

Give us some time to test and compare the results!

 

Also what Safari version is this on?

 

Please standby :)

Link to comment
Share on other sites

Hm, I looked at it on a Mac in Safari and couldn't see any difference. I tried like 15 times. I also noticed that you're not really comparing apples-to-apples because the GSAP animation has 3 steps and the CSS one only has 1. You've also got it set up such that the CSS version wouldn't keep the slight rotation and z translation whereas the GSAP one does. There are some clear differences that would be weighted in favor of CSS just because of the way you chose to set it up, but I'm still not seeing a performance difference. 

 

I wonder if you've got some sort of issue with your graphics card on your system or something. Not sure why you're seeing a performance difference on your system. Can anyone else see a difference? 

Link to comment
Share on other sites

davi what is your graphics card nvidia or Radeon?

Link to comment
Share on other sites

Hey Jack,
Apples to apples, same thing, probably even worse >

See the Pen qNgNpj by Davi-T (@Davi-T) on CodePen



I see it on both computers. My MBP is brand new.

Here are the specs on my iMac:
 

3.4GHz Quad-core Intel Core i7, Turbo Boost up to 3.9GHz
32GB 1600MHz DDR3 SDRAM - 4x8GB
3TB Fusion Drive
NVIDIA GeForce GTX 680MX 2GB GDDR5
Link to comment
Share on other sites

My Mac is slower than yours and I have put my nose right up to the screen and I cannot tell the difference. So strange. I do have an AMD Radeon graphics card though. It sounds like they look radically different to you...I'm at a loss for what to suggest. Plenty of tests show that GSAP is extremely fast, often FASTER than CSS transitions although they do have a native advantage when it comes to transforms. But again, I cannot detect any difference whatsoever on my Mac between those two codepens. And I can't think of any logical reason why the JS-driven one would look bad compared to the CSS one. It's just changing the properties 60 times per second. Unless it's indeed a graphics card anomaly. 

 

Is anyone else able to verify this? 

Link to comment
Share on other sites

I always see issues with jank on Nvidia video cards along with webkit apple and or webkit google.. very intermittent

 

Im very curious.. how does this behave?

 

See the Pen yJkaJV by anon (@anon) on CodePen

 

The above is your last codepen but with the rotation:0.01 and z:0.01, on the to() tween so it is not on a separate set() like your previous codepen. This way it is on the to() tween so it can be calculated with the matrix3d.

 

On a side note.. also be careful about setting position absolute on all your div tags, without setting position relative on its main parent. This way your absolutely positioned div tags are positioned relative to their parent, ensuring your elements are positioned correctly cross browser.

 

I dont have a Mac or one with a Nvidia video card so i cant test this at the moment.

 

Thank you for your patience! :)

Link to comment
Share on other sites

I don't see difference either. Win7, NvidiaGTX550Ti, Chrome 52.0.2743.116 m (64-bit), Firefox 48.0.

The only thing what is saw I huge lagspikes on Firefox, Operea and IE11 in bots CSS and GSAP cases. Firefox is smoothed out after 2 page refreshes.

I can't test it on Safari because the win version is discontinued as I know.

 

See the Pen mEvOAE by oliver15years (@oliver15years) on CodePen

  • Like 1
Link to comment
Share on other sites

Jonathan:
Same issue on that link, probably worse towards the end when it eases into place. Yep, I know the code is sloppy, just threw it together for comparison. I'm in no rush to get this resolved! I already finished this project back in March/April :) However, I'm sure someone else will run into this issue.

Jack:
Might be specific to Safari but it's definitely not an anomoly with just my computer. It happens on both my wife's mac's too, and my other MBP. Her work MBP which must be old, has a silver lid and the screen doesn't go to the edge; and her new gold macbook. I've only tested on Safari there though since she doesn't have other browsers installed. For me, it's happening in Safari and occasionally in FF (like 1 out of every 5 tries in FF and it's very subtle jank). The current Chrome has no issue whatsoever. I know when I was building this earlier this year, I was having this issue on more than just Safari. I'm not knocking GSAP, GSAP is awesome, I use it a lot, my new site coming up uses it mostly, it certainly makes life easier, and is certainly faster in almost every case. It seems though, that with this specific scenario (sliding a large image over semi-slowly) CSS is animating it more smoothly in Safari. And who knows, it could be very specific, perhaps just with this image at these dimensions. I haven't had to animate a large image again like that since but am sure I'll have to do it again coming up. I wonder if that would be the case with something different.

Again, it's not terrible jank and most people probably won't even notice it, but to me, it's certainly noticeable. Here's a video screen grab with the GSAP version on the left and the CSS version on the right. The GSAP version produces some jank occasionally whereas the CSS version is consistently ultra-smooth.
http://www.davi-t.com/misc/videos/codepen_slide_comparisons.mov

Here's a video showing it on my wife's gold macbook and my new MBP.
Difficult to tell with this video but it's even worse on these computers. >
http://www.davi-t.com/misc/videos/IMG_0798.MOV

Might be worth looking into...

 

Link to comment
Share on other sites

Thank you Oliver15Years for chiming in. ;)

 

I cant replicate it either this looks like a Mac Safari issue. But i digress..

 

I believe the smooth after 2 refreshes is due to not having the GSAP code inside a dom ready and a window load event. The refreshes are allowing the image to be cached. Also codepen does have lag due to the server demand of all us code monkeys :D

 

I will add a dom ready and window event to my example, so the animation code only runs when the dom is ready and the window is loaded so the code can run when the image is fully loaded, but not before.

 

:)

  • Like 2
Link to comment
Share on other sites

Yeah, unfortunately I don't think there's anything we can do. I certainly can't see any difference on my end. I wish I had a great solution to offer.

Link to comment
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.
×