Jump to content
Search Community

Performance with big images on a Parallax Slider using TimelineMa

Sergio Daroca test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm developing a slider with parallax effect, using TimelineMax. And it's joy ride with GSAP !

 

But, my intention was to deploy using node-webkit, and I'm getting quite inconsistent performance results.

 

In the codepen I show just the basics, next and previous buttons and you should be able to swipe left and right. (Have to add much more, later, more content on each slide, probably dragging (with Draggable) and make it an infinite slider thing...)

 

As for now, sometimes it just works beautifully, others, it's just a bit jerky, mostly at animations end, when slowing down.

 

I've tried different easings, tried to thin the KBs of images, force3D: true, etc...

 

Only thing is I get a better result, but still not allways smooth, if just open the page in chrome, instead of using node-webkit.

 

I'm about to go back to Flash CC, AIR and Actionscript, (the animation code would virtually be the same) but I'd really like to do this in javascript and HTML5.

 

wondering wether I'm getting hardware acceleration I tried chrome://gpu inside node-webkit, I get the same as just in chrome:

 

Graphics Feature Status
  • Canvas: Hardware accelerated
  • Flash: Hardware accelerated
  • Flash Stage3D: Hardware accelerated
  • Flash Stage3D Baseline profile: Hardware accelerated
  • Compositing: Hardware accelerated
  • Rasterization: Software only, hardware acceleration unavailable
  • Threaded Rasterization: Disabled
  • Video Decode: Software only, hardware acceleration unavailable
  • Video Encode: Hardware accelerated
  • WebGL: Hardware accelerated
Driver Bug Workarounds
  • clear_uniforms_before_first_program_use
  • exit_on_context_lost
  • texsubimage2d_faster_than_teximage2d
Problems Detected

 

It's a 16 GB RAM machine with a GTX 770 card, but the inconsistency has appeared almost identical on other machines with less resources, so I'm guessing it might not be a hardware issue ?

 

Any ideas ?

 

See the Pen rayJbR by SergioDaroca (@SergioDaroca) on CodePen

Link to comment
Share on other sites

Hello Sergio Daroca, and welcome to the GreenSock forum!

 

Thank you for the code example :D

  • What browser and browser version are you seeing this performance issue?
  • Are you testing this in Google Chrome? .. if so webkit is notorious and full of bugs.

That inconsistent performance results are not a GSAP bug, but has do with a number of factors with webkit.

 

When testing performance Google Chrome team advises to test in incognito mode so results don't get skewed by extensions or other running processes in chrome.

 

Also anytime you try to animate large images you can see lag or jerkiness due to trying to animate such large images (in your case images that are above 150kb). Its best to reduce the image as much as you can tolerate quality, and make sure the image is optimized for the web.

 

The latest version of GSAP uses force3D:"auto" .. but you can also try adding a slight value for z:0.001 and rotation:0.001 to your tweens.

 

force3D

  • when you set force3D:true, it forces GSAP to apply a 3D value to the element's transform, meaning matrix3d() instead of matrix(), or translate3d() instead of translate() which typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In other words, setting force3D:true usually boosts performance, making movement more smooth. However, if you exceed the GPU's memory limit, performance will degrade, so it's not wise to force3D:true everything all the time. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details. In our experience, though, it helps performance more often than not. The default value is false.

You can also change alpha to autoAlpha

 

autoAlpha

  • Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.

See the CSSPlugin Docs for more information using CSS transforms with GSAP.

 

And when applying initial CSS properties, i noticed you are using jQuery css() method. What you can do is use GSAP set() method. So this way you use GSAP to set those initial values for your CSS properties, so GSAP can keep track of CSS properties you change outside of it. What happens is when you use jQuery css() method you are making changes outside of GSAP. So its best to let GSAP handle changing or setting your CSS properties.

 

So for example you had this:

// Instead of using jQuery css() method
$('#strip').css('left',_slide_width+'px');

// you use the GSAP set() method
TweenLite.set('#strip',{'left':_slide_width+'px'});

:

More info about GSAP set() method found here: http://greensock.com/docs/#/HTML5/GSAP/TweenLite/set/

 

Also when making an example, its best to make a limited example with your issue so we don't have to go through a heap of code and logic. When only a small portion of your example uses GSAP.  ;)  It will make it easier and faster to go through your code if it is just a simple limited example as possible to better help you.

 

Here is your example with the modifications i advised.

  • I changed jQuery css() method with GSAP set().
  • I changed display none and block and alpha to use autoAlpha.
  • And added z:0.001 to your to() tweens.

Your forked example i modified:

See the Pen rayKVd?editors=001 by jonathan (@jonathan) on CodePen

 

Let us know if that helps .. if not.. please let use know what browser and browser version you are testing on. As well as what OS and OS version.

 

Thank you.. and again, Welcome to the GreenSock forum :)

  • Like 2
Link to comment
Share on other sites

Hi Jonathan !

Thanks a lot for a fantastic answer  :-P . I can't go over it all now, but I think your suggestions are indeed working.

I'll try to go over it on the weekend, if I can... and try to give real feedback soon.

(And I'll try to upload cleaner codepens next times... :mrgreen:)

Again Thanks a lot !

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.
×
×
  • Create New...