Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rockmandash

Svg performance run slow on mobile, should I switch to canvas?

Recommended Posts

G2pO4Dy.png
Hello, I have 9 svgs takes fullpage at each, each svg contains several elements, runs about 6 seconds to complete.
 
On computer everything works great, but on mobile it starts to slow down  :|, even on iPad pro 12.9. (so slow).
My site has 9 svgs, each takes fullpage, you can scroll to see different animation.
 
Here is my site:
If you open the url on computer, it will load pc version svg and code, otherwise it will load mobile version svg and code XD.
 
Here is a svg animation code look like:
    tlScene02.from($svg02topLine, 0.6, topLineParameter, 0.5)
             .from($svg02bottomLine, 0.6, bottomLineParameter, 0.5)
             .from($svg02Heading, 0.3, HeadingParameter, 0.7)
             .from($svg02subHeading, 0.4, subHeadingParameter, 0.8)
             .from($svg02Bg, 0.4, { y: -100, opacity: 0 }, 0.9)
             .from($svg02Door, 0.4, { y: -100, opacity: 0 }, 1)
    //---------------------------港澳
             .to($svg02PeopleHongKongAndMacao, 0.7, { y: 190, opacity: 1, ease: Power1.easeIn }, 1.4)
             .to($svg02PeopleHongKongAndMacao, 0.7, { x: -90, ease: Power1.easeOut }, 2.1)
             .from($svg02BubbleHongKongAndMacao, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 2.8)
             .from($svg02LineHongKongAndMacao, 0.1, { y: 3, opacity: 0 }, 2.9)
             .from($svg02TextHongKongAndMacao, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3)
             .from($svg02FlagHongKong, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.1)
             .from($svg02FlagMacao, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.2)
             .call(animateNumberIncreasing, [$svg02NumberHongKongAndMacao, 14.5, 1, 'percent']) //14.5 %

             .from($svg02NumberHongKongAndMacao, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.5)
    //---------------------------中國
             .to($svg02PeopleChina, 0.7, { y: 70, opacity: 1, ease: Power1.easeIn }, 1.9)
             .to($svg02PeopleChina, 0.7, { x: -140, ease: Power1.easeOut }, 2.6)

             .from($svg02BubbleChina, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.3)
             .from($svg02LineChina, 0.1, { y: 3, opacity: 0 }, 3.4)
             .from($svg02TextChina, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.5)
             .from($svg02FlagChina, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.6)

             .call(animateNumberIncreasing, [$svg02NumberChina, 40.1, 1, 'percent']) //40.1 %

             .from($svg02NumberChina, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 3.9)
    //---------------------------日本
             .to($svg02PeopleJapan, 0.7, { y: 80, opacity: 1, ease: Power1.easeIn }, 2.4)
             .to($svg02PeopleJapan, 0.7, { x: 130, ease: Power1.easeOut }, 3.1)

             .from($svg02BubbleJapan, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 3.8)
             .from($svg02LineJapan, 0.1, { y: 3, opacity: 0 }, 3.9)
             .from($svg02TextJapan, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4)
             .from($svg02FlagJapan, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.1)

             .call(animateNumberIncreasing, [$svg02NumberJapan, 15.6, 1, 'percent']) //15.6 %

             .from($svg02NumberJapan, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4.4)
    //---------------------------東南亞
             .to($svg02PeopleSoutheastAsia, 0.7, { y: 200, opacity: 1, ease: Power1.easeIn }, 2.9)
             .to($svg02PeopleSoutheastAsia, 0.7, { x: 115, ease: Power1.easeOut }, 3.6)

             .from($svg02BubbleSoutheastAsia, 0.6, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.3)
             .from($svg02LineSoutheastAsia, 0.1, { y: 3, opacity: 0 }, 4.4)
             .from($svg02TextSoutheastAsia, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 4.5)
             .from($svg02FlagSingapore, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.6)
             .from($svg02FlagThai, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.7)
             .from($svg02FlagMalaysia, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.8)
             .from($svg02FlagPhilippines, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 4.9)
             .from($svg02FlagVietnam, 0.4, { scale: 0, transformOrigin: '50% 50%', ease: Back.easeOut.config(1.7) }, 5)

             .call(animateNumberIncreasing, [$svg02NumberSoutheastAsia, 13.7, 1, 'percent']) //13.7 %

             .from($svg02NumberSoutheastAsia, 0.4, { scale: 0, transformOrigin: '50% 50%' }, 5.3)


             .from($svg02BottomText, 0.4, BottomTextParameter, 5.2);

 

You can see my site is almost complete, but I really don't like the low speed on mobile.
All the animation done inside svg so I think I probably can not cache them as png or wrap them as div?
So I was thinking moving to canvas will get better? I haven't try it yet.
 
Please help, thank you!
 
 
update: I think canvas is much more worse, so my problem stick to svg mobile performance issues.
Link to comment
Share on other sites

Hi rockmandash :)

 

Welcome to the GreenSock forum.

 

Full screen SVGs with lots of movement can certainly be a struggle. You have to remember that GSAP is only animating the values while all the rendering is done by the browser. There are limitations especially on weak mobile devices.

 

I think you're taking the right testing steps. Try it with SVG and then try it with canvas and then decide. Good luck.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

Hi there!

 

I had a quick look at your site and a bit of the code. I would recommend you cutting out all elements you are only translating/scaling/rotating around out of your master SVG and use them as DOM objects, that way you will be able to make use of GPU acceleration. That will help a lot on your performance.

 

Only keep the SVG's that you are animating strokes and/or shapes as they can't really be altered if contained in a external file.

  • Like 2
Link to comment
Share on other sites

Hi rockmandash  :)

 

Welcome to the GreenSock forum.

 

Full screen SVGs with lots of movement can certainly be a struggle. You have to remember that GSAP is only animating the values while all the rendering is done by the browser. There are limitations especially on weak mobile devices.

 

I think you're taking the right testing steps. Try it with SVG and then try it with canvas and then decide. Good luck.

 

Happy tweening.

:)

Thank you for your reply!!, I will keep testing to see if thing gets better! :ugeek:  :ugeek:  :ugeek:

Link to comment
Share on other sites

Hi there!

 

I had a quick look at your site and a bit of the code. I would recommend you cutting out all elements you are only translating/scaling/rotating around out of your master SVG and use them as DOM objects, that way you will be able to make use of GPU acceleration. That will help a lot on your performance.

 

Only keep the SVG's that you are animating strokes and/or shapes as they can't really be altered if contained in a external file.

Wow, I don't know dom elements could use GPU acceleration, but first thing I need to figure how to wrap each of them as div since all the elements are inside a single svg. Thank you for your reply!!!

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