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:
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 ?
Performance with big images on a Parallax Slider using TimelineMa
in GSAP
Posted
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:
Disabled Features: accelerated_video_decode
Disabled Features: gpu_rasterization_field_trial
Disabled Features: gpu_rasterization_expanded_heuristics
Disabled Features: gpu_rasterization
Applied Workarounds: exit_on_context_lost
Applied Workarounds: texsubimage2d_faster_than_teximage2d
Applied Workarounds: clear_uniforms_before_first_program_use
Disabled Features: threaded_rasterization
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