Tweening large divs, really slow.

[mrEmpty]

Hello.

 

First off, I'm loving GSAP on JS, wish it would come to iOS...

 

OK, so I am doing a simple test, converting a Flash app to HTML. We have some absolute positioned divs, 1520px x 750px on a 1920x1200 screen. At the moment I'm simply using TweenMax to animate the css left property, and the animation on Chrome is very jerky. We have to use Chrome for other reasons.

 

Sometimes the animation runs very smooth, other times it's running at something like 8fps.

 

I'll include the incredibly simple JS in case anyone wants it.

 

pOne = $("#panelOne");
TweenMax.to(pOne, 0.45, {css:{left:"-1500px"}});

 

Any ideas? Nothing is showing in any log, the system is a Win7 PC and it's fairly capable, nice GPU etc. Running Chrome in kiosk mode.

 

Cheers.

[mrEmpty]

I've moved to doing it all in canvas, but am interested if anyone has any ideas on this.

[Carl]

I haven't seen that type of performance, no.

 

I just made a simple fiddle:

http://jsfiddle.net/...mbedded/result/

 

runs fine on Chrome (normal and presentation mode) and iPhone, and I also tried a shorter duration like you are using like 0.45 and it isn't as smooth (on iphone) but its not horrible by any means. I haven't checked the frame-rate, just going by sight.

 

Also you can experiment with using x instead of left.

 

Did your tween look noticeably worse than mine? If so, feel free to post an example.

 

BTW, nice to see you around here again!

[GreenSock]

Not sure if this helps or not, but when you're tweening very large images, keep in mind that some browsers (Chrome especially) tend to burn a lot of CPU cycles just resizing and rendering the image (which has nothing to do with the animation engine or Javascript execution performance). Make sure you're having the browser render the images at their native size, otherwise you can incur some huge performance penalties (again, especially with Chrome because they use an algorithm that prioritizes smooth/crisp antialiasing/rendering rather than performance).

[mrEmpty]

Hello, it's nice to be back.  Work gets in the way some times.

 

It was noticeably awful, sometimes, but not others.  You'd refresh and it would be slick, then you'd try again and it'd look like it was buffering.  Our divs contained text elements, although to be honest, even an empty div with background colour would mess up.

 

Canvas was slick, and I'm happy to stick with that, but I'll keep researching this because it's fun and may come in handy.

[ururk]

Have you tried playing around with the speed of the transition and the framerate? I found that going to a small number (.4) versus a 'large' number (1.5) improved the appearance of jerkiness, along with dropping the framerate to 30. This would reduce the number of redraws the browser does (correct?), and the faster speed gives less time for the jerkiness to be noticeable.

 

Even with those tweaks... I'm on the fence about sliding large panels of content (even after doing this myself just recently).

 

I've seen other sites that do this - one that manipulates a container (and times it was jerky), and another that I *think* scrolls the actual page left to right, and frankly, I think the key to a smooth side-scrolling page is to scroll the actual page and not the div's. This might not work if you are trying to animate an element... but it could work if you are performing a scroll action on the body.

 

Container style:

http://www.elegantthemes.com/demo/?theme=Sky

 

Body-style Scroll (no JS needed, but this one is enhanced with JS):

http://imakewebthings.com/jquery-waypoints/