Hi community
Are there any options available within Sketch to add micro animations, such as LottiFiles integration, or even simpler, just add animated gifs?
Best,
Thomas
Hey @thomas.enzler
Not at this time. We’ve considered it, but may revisit the idea at a later stage.
thanks for this quick reply @jonne
I would love to see micro animations in Sketch - especially the possibility of importing LottieFiles (JSON), which would make a difference in prototyping. What I do today: I add a static icon in Sketch instead and then I have to explain to the Devs, “This icon should be an animated one” and send the link with the animated icon to the developers. Not very practical 
So please, yes, put it on your future list, it would be awesome.
have a nice day
thomas
3 Likes
Thanks! It’s interesting to read the use case. And I agree, this would be very useful.
I’ll keep you posted if anything changes in this area.
2 Likes
strike 2
Here is one more Usecase for you.
I have a form with a text area. The user can put in some .csv and submit his input. The frontend needs to do some parsing and fill the form with the structured data, before it will be sent to the backend. While parsing I would like to show a processing animation. You see its quite hard to describe this with my own words. This whole process should feel for the user as smooth as parsing csv values can be.
BTW gif animations could be a compromise, since they are supported natively by browsers, this could be a simple first step for your devs.
1 Like
Hey @ovikay,
Welcome to the forum! Thanks for sharing.
While don’t have yet gif support, reading your use case, I think Smart Animate can help you build a prototype that communicates better the process of file upload and processing, so the development team has a clearer picture of how it’s meant to work.
I built a quick demo, I hope it helps and you can download the Sketch file too
I hope this helps!
3 Likes
Oh wow thats cool! Thanks a lot for your effort!
How did you animate that circle?
good question, would interest me as well…
Hey Ovi,
Ohh it’s quite easy. Just add a value to the angle input field on the Inspector. For this prototype this is what I added:
On the start circle: zero
#
On the end circle: 720
Here I entered 720, whic will make the circle do two full rotations in the time I set for Smart Animate. The shorter the time, the faster the spin
I hope this helps!
2 Likes
Thats awesome, thanks a lot. I wanted to insert a lottie to show this 