Translation with big images on tiny computer

[benoit]

I made a small website to play a slide with external rss, news and photos. I use a small computer like raspberry and launch Chrome in kiosk mode.

I can do without animation (tl.set) but It's better with GSAP ;¬)
My current problem is the image transform with a bad painting effect Here is a pen to show the problem :

 

See the Pen EEgLZx by benoitwimart (@benoitwimart) on CodePen

I made a screenshot on the small computer :

http://ibb.co/bLVSUc

It's better in live but this is the glitch effect.

Can I reduce this, using protips ? I use a Odroid xu4 with a mali GPU and 8 CPU are not at 100% (50% max).

[Tasty]

Hello @benoit

Looks like this is a performance glitch - I think. Probably because you are using x instead of xPercent witch is better for performance 

Please take a look at this pen and let us know if it solves the problem

See the Pen EEgpyp by tastysites (@tastysites) on CodePen

Something that also could help if you need more control over the performance
https://greensock.com/docs/TweenMax/static.lagSmoothing()

I'm not sure how you want to display things in the slider but maybe this small CSS change will help you.

See the Pen bvwjWB by tastysites (@tastysites) on CodePen

If you have any questions, please ask
Happy Tweening!

[Sahil]

@Tasty Sites Both x and xPercent animate transform and you wouldn't see performance difference while using either, they both take advantage of GPU.

 

@benoit That seems like problem is you are animating a really large image on weak GPU, I think best way to go would be to use smaller images. You should test some of the demos on your mobile and on your machine so you will get idea about how much workload your machine is able to take. Looking at your screenshot it looks like your machine is struggling to render things properly.

[Tasty]

Good to know Sahil, always thought the xPercent is the faster one ^^'

[benoit]

I try different code, img in svg, img with top/left position, img with css image render option, no ease in GSAP…
I look in about:gpu on Chrome, and about:flags… to find a better display.
On this computer opengl is good but web browser not so good ?
https://webglsamples.org/aquarium/aquarium.html

500 fish is at 35 FPS

[OSUblake]

xPercent would be slower just because it has to calculate more things. But slow is relative. You probably won't notice the difference.

 

GPUs have size limits, which will be some power of two, like 2048 or 4096 for weak devices.

 

But I would just try drawing the image with canvas first.

 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

 

[OSUblake]

^^^ By size, I'm talking about pixels, like 2048 x 2048.

[benoit]

I can run Ubuntu Mate or Android on this device, animation on Android looks more smooth (chrome/chromium),  but Android is less customable
Next step is to remove translation and use opacity…

[OSUblake]

Is it better with canvas? That's still a lot of pixels that need to be painted for a weak device though.

 

See the Pen pLNReP by osublake (@osublake) on CodePen

 

 

[benoit]

same result with canvas
I recode my timeline with opacity, it's pretty good.

[OSUblake]

Interesting. Sounds like a refresh sync issue, which causes screen tearing.

https://en.wikipedia.org/wiki/Screen_tearing

 

[benoit]

Quote

* Samsung Exynos5422 Cortex™-A15 2Ghz and Cortex™-A7 Octa core CPUs
* Mali-T628 MP6(OpenGL ES 3.1/2.0/1.1 and OpenCL 1.2 Full profile)
* 2Gbyte LPDDR3 RAM PoP stacked
* eMMC5.0 HS400 Flash Storage
* 2 x USB 3.0 Host, 1 x USB 2.0 Host
* Gigabit Ethernet port
* HDMI 1.4a for display
* Size : 83 x 58 x 20 mm approx.(excluding cooler)
* Power: 5V/4A input
* Linux Kernel 4.14 LTS
* We guarantee the production of XU4 to the end of 2019, but expect to continue production long after.  

spec from http://www.hardkernel.com/main/products/prdt_info.php?g_code=G143452239825