DEV Community

Cover image for Lottie Animations ๐Ÿ˜
emin
emin

Posted on

Lottie Animations ๐Ÿ˜

This library has been out there for a while, and it keeps getting better. I literally thought everyone knew about it, but after a recent talk with a friend of mine I realised that is not the case! So tap play on that coding playlist you have, and let's do this! It's SO easy!

lottie cover image


Step 1: Install CocoaPods

You could do this with both SPM or Cococapods, but let's use the latter in this tutorial....because reasons.

If you already know how to handle cocoapods, skip forth โฉ, this is not the section you are looking for.


Open up the Terminal app and paste/type this:

sudo gem install cocoapods
Enter fullscreen mode Exit fullscreen mode

This will install cocoapods dependencies on your Mac. You only need to do this once on your machine and you are good to go for any future pods not related to this project.

Next, you need to navigate to your project directory using the Terminal app. It's pretty straightforward and there are few way to do it. If you are not familiar with navigation using standard terminal commands, you can always just drag the project folder to your terminal window and press Enter.

For example, if you placed your folder on the desktop, path should look something like this:

~/Desktop/LottieTest
Enter fullscreen mode Exit fullscreen mode

Note: If you are having issues with the Terminal and are not familiar with it, reach out to me on Twitter, I will love to help out ;)

While inside your project folder, you need to prepare the project for your lovely pods. It will create a Podfile to which you will add all the pods you want to install. Think of it as a wish list and Cococapods as the Santa ๐ŸŽ…

So, type this:

pod init
Enter fullscreen mode Exit fullscreen mode

After some quick setup, it will be done, and now you need to open the Podfile. Enter this into your Terminal window:

open Podfile
Enter fullscreen mode Exit fullscreen mode

It should look something like this:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'LottieTest' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for LottieTest

end

Enter fullscreen mode Exit fullscreen mode

First, replace the platform line with the right minimum version of iOS you plan to support. It really depends on your project and Cocoapods will snag the right version of the pod based on this. At the moment, we are close to iOS 14 so I will use iOS 13 as the minimum version. You also need to remove the # since that is a comment syntax, like // in Swift.

platform :ios, '13.0'
Enter fullscreen mode Exit fullscreen mode

And finally we can tell our Santa what we are after this year. So, under # Pods for LottieTest line, enter this:

pod 'lottie-ios'
Enter fullscreen mode Exit fullscreen mode

Save that Podfile, and close it. In your Terminal app you should be still inside your project folder. If your project is opened in Xcode, close it and type in this final command:

pod install
Enter fullscreen mode Exit fullscreen mode

If you are doing this for the first time, I know it seems like a lot, and probably confusing, but very soon you will be doing this with your eyes closed. Your finger will know what to do!

Note: When using Cocoapods, once pods are installed, you will no longer use the standard file to launch the project, or in our case โžก๏ธ LottieTest.xcodeproj
From now on, you need the use the newly generated project file โžก๏ธ LottieTest.xcworkspace
You can see that the extension is different and file icon is mostly white instead of blue.

Open that .xcworkspace file and let's get to the good stuff!


Step 2: Getting the JSON

Once the pod is installed, we only have a few steps to go through to make our app come alive.

If you have some animation skills, you could easily create your own animations as there is a simple plugin that can convert most animations into JSON files. You can go on LottieFiles for more info on how to do that, or just browse that site and find the right animation for you. Most of them are free to use, and some more complex ones do cost but are well worth it.

For this example, i will use this crazy awesome elephant but you are free to use anything you want as usage is completely identical.
Tap the download button and then choose Lottie JSON

But before that look at how crazy this mt*cka is. Love it!

elephant image

Note: Before importing the JSON file make sure to rename it to something meaningful. When you try to preview it inside the Xcode it tends to get buggy since this json contains LOTS of text, so it might become unresponsive. Hoping this will be handled soon. In any case there is nothing much you can do with the animation if you try to edit the contents anyway.

So, move that file into your project navigator, but OUTSIDE the Assets.xcassets folder and we should be ready for the next step.


Step 3: Pod import and setup

You've been through quite few steps of setting everything up, and you are ready to see the fruits of your labour ๐Ÿค˜

In your Main.storyboard place the UIView in the middle of the screen and possibly add some constraints so it would take up the whole screen or just a part of it.

image

Important While your view is selected, open the Identity Inspector and change the class to AnimationView and module to Lottie

Inside your ViewController.swift import the Lottie pod. You should have the autocomplete come up as soon as you start typing. If you don't, then you probably had some issues with the installation so go over that step again.

import Lottie
Enter fullscreen mode Exit fullscreen mode

Next, create an outlet for your view inside ViewController.swift.

image


Step 4: Animation time!

Your project is not ready for any animations you can throw at it. Let's to exactly that!

Inside viewDidLoad, type this:

lottieView.animation = Animation.named("elephant")
Enter fullscreen mode Exit fullscreen mode

Make sure NOT to include the extension (.json) for the filename. This will load the animation, but it won't play it. So add this under that line:

lottieView.play()
Enter fullscreen mode Exit fullscreen mode

Thats it! Look at him go!

elephant animation

You can further edit this animation by modifying contentMode or loop etc...feel free to go through the documentation and explore!

Here are few examples

lottieView.backgroundColor = .clear
lottieView.contentMode = .scaleToFill
lottieView.loopMode = .loop / .autoReverse / .playOnce
Enter fullscreen mode Exit fullscreen mode

Thank you for reading! Feel free to get in touch on [Twitter][twitter]

Consider subscribing to the newsletter below if you loved the content.

Or don't! Free country!

Cheers! ๐Ÿป

Top comments (0)