A Way to Add Lottie Animations to an Axure Prototype


#1

I couldn’t find anything online on how to implement animations rendered with Lottie into Axure prototypes so I did some experimenting. I am by no means an expert, so I’m sure there are more efficient ways of doing this. Hopefully this is helpful to someone who was searching for a solution like me.

What is Lottie?
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. It was actually created by the smart folks at Airbnb

There are a few things needed before we get started.

[ul]
[li]Download the bodymovin plugin for After Effects. This will allow you to export animations to svg/canvas/html.
[/li]
https://github.com/bodymovin/bodymovin

[li]A text editor of some kind. I really like Sublime Text, but use whatever you are comfortable with. We will only be using it to copy the code.
[/li]
https://www.sublimetext.com/

[li]An animation of some kind that was made in After Effects, or if you want to use one of the great pre-made ones off of LottieFiles feel free, just get the code for it.
[/li]
https://www.lottiefiles.com/

[/ul]

Let’s Get Started

  1. If you are exporting an animation from After Effects, export the animation using the bodymovin extension for After Effects and make sure the export option is Demo (exports an html for local use)

  2. In Axure, create a page for the animation and create a dynamic panel on the page at 0,0. Name both the page and dynamic panel so they are easy to identify later. You can place the animation page in a folder called “Animations” or “Source” since these won’t be touched unless you want to resize it. This will be used as the “Source” for that animation. It will make sense on step 9

  3. Now publish this project to Axure Share.

  4. On Axure Share find the project that you just published and in the configure menu dropdown
    select Plugins.

  5. Create a New Plugin and name it (It doesn’t matter what it is named as long as you can identify it)

  6. Set the location to “Inside Dynamic Panels with Name:” and type the exact name of the dynamic panel you made in Axure.

  7. Open up the html to view the code, using Sublime Text or another similar text editor and copy and paste it all into the content area. Now select Save and Close.

  8. You will also be asked what page(s) to add the plugin to. Select the page name on the left and select the arrow to move it to the right. (This will be the page you created that dynamic panel on) Then select “Save”

  9. Back in Axure, create the page where the animation is actually needed and create an inline frame. Make the inline frame the exact same size as the dynamic panel source. Set the frame target to the page you made with the animation. (This is referencing the “Source” page that you made previously. This is my workaround since I had trouble getting more than one animation to render on a page any other way)

  10. Now publish the file again and open the link. You should be seeing the animation if everything was entered correctly.
    (Note: animations will not show up locally, they have to be viewed after publishing)

  11. Something isn’t right. The animation should have filled the entire inline frame. After some trial and error I realized that within the code itself, the background was set to 90% width and height. So within the plugin we created earlier, I changed the width and height to 100% and saved and closed.

  12. That’s better.

  13. The inline frame can be moved anywhere on the page. If you want to make the animation bigger, you will need to scale the dynamic panel on the “Source” page and also scale the inline frame (the inline frame acts like a mask) Whatever size you make the dynamic panel I suggest making the corresponding inline frame the same size. Remember, you will need to republish every time you make a change to the animation.

  14. That’s it! You can repeat the process for as many animations as you need. Just make a new plugin for each one.


Lottie json file into axure?
#2

hi,
thanks for the detailed explanation.
can you please elaborate where and how do i link the dynamic panel to the json animation file (downloaded from lottie)?

thanks


#3

Hi xhovavx,

It sounds like you’re referring to the steps for setting up the actual plugin for the prototype hosted on Axure Share (steps 4-8 in rhuettldesign’s original post). You’ll need to do this part through the Axure Share website itself after having published your prototype there.

To add the plugin, log into Axure Share (share.axure.com) with the account you uploaded your prototype with, mouse over the gear icon next to the prototype, and select “Plugins” from the context menu:


On the Plugins page, click “New Plugin” to begin setting up the plugin:


You should then be able to follow the rest of above steps to finish setting up this plugin.

I hope this helps! If you’re interested, you can also read more about Axure Share plugins here.


#4

hi,
thank you for your feedback,
i did create new plugin as instructed, but i dont understand how to use the html section, in other words where and how to include the reference to the json (animation) file

an example rp file/detailed example of the html code will be greatly appreciated

thanks again


#5

Hi xhovavx,

It seems like you’ve already downloaded the Lottie file containing code for the JSON animation and also created a plugin for your prototype on Axure Share. Based on step 7 of the original post, you’ll want to reference the code from that file by copying and pasting it directly into the plugin’s “Content” section:

Note that although the Axure support team can help with setting up AxShare plugins, we won’t be able to troubleshoot the actual code being added. If you happen to be running into any issues with your code though, please don’t hesitate to reach out to the forum community here–they may be able to offer some useful suggestions or solutions!


#6

as i couldn’t make it plays without flicking i entered the url into the inline frame*
like so:
https://lottiefiles.com/iframe/899-like

but now it plays in an endless loop, how can i make it play only once and freeze on the last frame?

http://ho9zlu.axshare.com/#p=page_3

*what i inserted in the plugin content was:
< iframe width=90% height=90% src=“https://lottiefiles.com/iframe/899-like”>

http://ho9zlu.axshare.com/#p=page_4


#7

If you visit the URL directly you can see it loops, so you probably need to edit it there. I don’t think fixing the looping will have anything to do with Axure.


#8

I’ve been using Lottie animations more and more in our mobile apps and overall they’ve been great (once all the inevitable Lottie player bugs get worked out…)

I have wanted to take advantage of Lottie’s control functions in my prototypes for some time now and have recently made some improvements to this method from @rhuettldesign. This makes for very powerful and flexible animations in your Axure prototypes.

Fellow Axurians, we can now:

  • Load multiple animations on a page without using iFrames
  • Set defaults for auto-looping and auto-playing
  • Pause an auto-looping animation, play it again and reload it, all on the fly
  • Scrub through an animation frame by frame, and instantly jump to any frame
  • Change the speed of the animation
  • Reverse the direction of the animation
  • Scale the animation with perfect quality

See this demo: https://vpeqmb.axshare.com

Lottie Tests.rp (594.6 KB)

However, this currently only works on Axure Share, and only with my own animations. I’m having a problem getting the Lottie JSON files to load locally via javascript (into an Axure widget) and sorely need the help of an expert like @nkrisc!

My attempts at doing this are documented in the last two pages in this .rp file. Thanks in advance for any help with this.


#9

I’ve just stumbled across this.

Completely and utterly brilliant work.

:clap: :clap: :clap:


#10

I needed to use a looping animation having transparency on top of an image. I tried your solution but looking at your file you seem to have used a dynamic panel instead of an inline frame. I wanted to make the frame transparent but it is not working by removing the background-color css property. Can you share the steps of how you linked the dynamic panel for the beacon with the plugin?


#11

Right… Inline Frames do not support transparent backgrounds, just like any web page. This is why I used a dynamic panel to house the Lottie JSON.

Can you share the steps of how you linked the dynamic panel for the beacon with the plugin?
I did this in the “Lottie Tests” prototype (link in thread above) alongside each demo. But maybe the specific step missing for you is in the Axure Cloud (web app) Plugins page. Follow these steps:

  1. Publish your prototype to Axure Cloud.

  2. Sign in to the Axure Cloud web app: https://app.axure.cloud/

  3. Click into your prototype file (click the filename in the Project Name column)

  4. Click the Plugins tab --this is where you should already have created at least one plugin for your Lottie animation(s)

  5. Click “Edit” button for your plugin

  6. Click the (unnamed) dropdown and select “Inside Specific Dynamic Panel”

  7. Enter the exact name of the target dynamic panel in the Panel Name field (cut & paste from RP for reliability.) For example, “beacon” is the name of my dynamic panel widget on each page to which this plugin is assigned.

  8. Scroll down and Click “Save Plugin” button

  9. Assign specific pages or all pages which will use this plugin

  10. Reload and test your prototype on Axure Cloud again


#12

@mbc66 I can’t thank you enough man.
:bowing_man:t4::raised_hands:t4::relieved:

What I had missed from the steps was place the dynamic panel in the main page I wanted to see the animation and assign that page to be included in the plugin’s include pages setup (step 9).
Also the fix for including more than one animation in the same page is really cool (I’m still using 2 separate plugins but it works fine only if the id names are different - lottie and lottie2).
< div id=“lottie2”>< /div>

container: document.getElementById
(‘lottie2’),

@rhuettldesign - Thanks a ton for this solution. Although inline frame did not work for me but @mbc66’s approach enabled the transparent container for what I needed to achieve.

Cheers