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:
https://rockmandash.github.io/InteractiveInfographic/
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.