Jump to content


Translation with big images on tiny computer

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 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 :


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).

Link to comment
Share on other sites

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

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!

  • Like 3
Link to comment
Share on other sites

@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.

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 ?

500 fish is at 35 FPS

Link to comment
Share on other sites

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.



  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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…

Link to comment
Share on other sites

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



  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites


* 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

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.