top of page

Blog 4 - 2D animation using Lottie Files, Website design add on techniques that are cool

Updated: Sep 9, 2023

created by KHWD, the home of great website design, on 28th August 2022 at 8.21


Having found WIX has a facility to embed Free Lottie file animations which are all 2D vector animations and spending a lot of time with the WIX experts getting what they had documented to work I now feel I have learnt a lot about Animation, both purloining what is readily available and also what I can create myself for use on your websites. What is it they say, you are never to old to learn and my guess is this will be a journey of discovery over the coming weeks and months and hopefully to my customers advantage. We will see, I am certainly enjoying the learning... little grey cells etc. etc.

This website design blog no 4 talks about 2D animation using Lottie Files and Converters to create my own or embed from the Catalogue. Hugely fun and useful website design add on techniques. #websitedesign

blog 4 KeefH Web Designs using Lottie files
a voyage of discovery, the world of 2D animations

If you would like to see what I have achieved already by "borrowing" some existing 2D animations from LottieFiles look here under the Mickey, Fireworks and Pula tabs on my HOLIDAY2010 site, it will give you some ideas. I've joking referred to these examples as my "Mickey & Lottie Animations Studio Inc." One either inserts these into your website design as embedded HTML, straight java .json files or the rather antiquated iframes which I initially had to use whilst sorting out its use with WIX, an issue for website design but now sorted. Now we can use the Lottie Animation URL direct in the plugin it means the 2D animation becomes both integrated automatically with the theme background colours of your site and is totally scalable, since it is a vector image. Here is a summary of some of the debate I had with WIX to get it all sorted, great fun, NOT! #fun

image showing how to making Lottie files work in WIX
making Lottie files work in WIX

In the LottieFiles editor you can upload either SVG (scalable vector graphics) or JSON files. I have tried both. I have yet to use my version of Adobe Illustrator but I will. There are various free converters out there for use with 2D animation manipulation , Convertio is one I have used effectively, it is an online upload / download tool but I also own a whole set of AVS tools at my disposal for conversions etc. etc. The most effective use I have currently though I would say wouldn't I as its my current "best" process was creating an animation video via either AVS video studio or MS's Photo app and then using Isotropic to convert it to the specific Lottie JSON format and then loading it up to LottieFiles.

Currently none of my animations sitting on my dashboard will LottieFiles let me publicly publish but I have an open issue request with them to resolve this, once done I will be home and dry and able to offer this as another service.

My LottieFiles profile is here if you are at all interested, if its all too techy don't worry, i will take care of all of that for you #nerd #KHWD Sadly it won't (yet) let me show you my dashboard of animations under construction and waiting to be published #boo

In order to increase my knowledge and visibility in the web design space and learn from others I have also registered my 1st projects with Dribble, BeHance and GitHub, I have linked them all to my LottieFiles account, you can get to then via the SOCIAL button on the home page in the icon row. Thanks for looking.

KHWDs social icon bar


Rated 0 out of 5 stars.
No ratings yet

Add a rating
bottom of page