Hi I’v used some of Telegram stickers in my website by uploading them into Lottiefiles website and exporting them as json files. But when I go to my website page, my Google Chrome browser uses about 80% of my laptop CPU and also animations have lags in playing in laptop! How can I resolve this serious performance issue? Thanks
1 Answers
Don't use Lottie files on your website, I tried using vue-lottie npm package and realised my website was many times slower and transitions looked seriously choppy.
Solution really is to not use SVG animations unless they were built for the web (using html and css, sometimes JavaScript too).
This is why you don't see many animations on websites, it costs a lot of money to get a technical web designer to write the code for one, given it cannot be ported well from after effects.
You could try using animations as videos but that's only applicable if your background is white (almost all animations I've purchased from UI8 are white bg) or you are an experienced video editor, able to change the background-color to what you need. Clear downside is if your website design changes, you have to redo the video editing.
Related