Hi I have already used the tutorials here e.g. A Way to Add Lottie Animations to an Axure Prototype
…to place a lottie animation inside axure, but only with the help of after effects + bodymovin > html export.
My question is if I can take a json file directly from https://lottiefiles.com/196-material-wave-loading?lang=de directly and place it without after effects, because i can’t use it currently… Is it possible?
Help is appreciated.
Yes, this should work, but you’ll need the HTML “wrapper” to use the method posted in that thread. So, on the LottieFiles page, scroll down a bit to find the “Use this animation in” section and click the "<html> " button
(https://lottiefiles.com/web-player?lottie_url=https://assets4.lottiefiles.com/datafiles/nT4vnUFY9yay7QI/data.json)
If you copy the script from there into your Axure Cloud Plugin it should work.
…I’m still wanting to figure out a way to use the .json files directly without the need for Axure Cloud and the HTML wrapper.
I saw your post and your example file with the player controls and was actually hoping for you to find my thread 
Thank you for your hint I actually did exactly that but the dynamic panel was too small and I couldn’t see the animation - stupid fault.
Classic.
The nice thing with Lotties is you can adjust their size in the HTML and/or javascript and use percentages as well as pixel dimensions.
I have another problem. I want to let the lottie animation appear inside a repeater and it doesn’t work. The animation is already visible on load and shown between the gap of each row.
It works if I place it inside an iframe. The problem is that I have set every background to “transparent” and the iframe still shows a white background.
How can I get rid of it ?
You might need to post your .rp file for this one…
Lottie animations in a repeater… Makes sense, but not sure how the Item Load logic would work… 
Sounds like you don’t want the animation visible initially. Do you mean “hidden” or “static”? The first should be easy, just hide the container in the editor and then in the Item Loaded or Loaded (which is triggered after all the repeater items load) set it to show. If your repeater is set to “Fit To Content in HTML” then hiding a widget may affect the row’s height and/or width. That may be what is going on with the animations showing “between the gap” --the repeater thinks the row is a certain size based on the visible widgets at load (whatever you have in the Axure editor), for example, 50 px height. If you then load a Lottie .json via javascript injection and its height is 70 px, then you may get a kind of “overload” where Axure still thinks the repeater row is 50 px tall. Basically, the HTML doesn’t agree with–nor know anything about–the injected javascript code. You should be able to get around this by placing a widget in the background (I use a Hotspot because it is invisible by default) which is set to the correct height of the row–after your Lottie is loaded. Also, if you have Lotties of differing heights, you’ll need to change the size of their container in the Item Loaded event, and/or the size of your hotspot, especially if their height determines the height of the row (i.e., it is the tallest widget in your repeater cell.)
For the latter–showing the Lottie animation as static, it could get tricky because if you are controlling the animation via js, the timing will get messed up–you can’t pause or control the timing of the loading sequence for repeaters. you’d need to do it after the entire repeater loads. But, you should be able to issue a single stop() command which would affect every repeater row. My guess is you need to use the Move or Rotate events of the animation container to directly control a specific row’s animation from outside the repeater, say to start the animation only for the Lottie in row 3.
Not sure you can get around that… It might be possible to apply the methods described here, if someone can figure out a hack for Axure… maybe via CSS plugin??? If you want to pursue this, I’d suggest starting a new thread and simplifying the question down to just how to make an iFrame background transparent.
https://www.c-sharpcorner.com/UploadFile/2cb323/make-transparent-web-page794/
Yes, the animation should be hidden and static until you hit the blue button. It will appear + overlay (no inserted yet) …and will stop after a short time. All fades away and the blue button changes the state.
That’s the animation I want to use as loading indicator: https://lottiefiles.com/10158-wave-animation?lang=de
I tried to use the hotspot als placeholder, but it didn’t work.
Here is the misplaced animation in between: https://ih6d14.axshare.com/#id=n82d1t&p=home
lottie_doesnt_work.rp (321.1 KB)
There is a hidden Dynamic Panel that’s called “LottieGoesHere”…that’s where the animation should actually fade in.
I’m not sure how to proceed. Your help is appreciated.
Looks like placing a Lottie container (dynamic panel) inside a repeater just doesn’t work. I’m not sure why, and it is possible some more tinkering could make it work. I’d first want to investigate the new “webflow” feature that AirBnB (Lottie creators) put out–that looks like it should work better for Axure prototypes, but I haven’t read fully or tried it yet.
So, you have a LOT of things going on in your repeater, and it looks like the gap between repeater rows is not due to the Lottie. I tried a very simplified repeater and just could not get the Lottie to even show, and the “Trigger” button did not work–so likely obscured by the dp, or whatever layout was corrupted by trying to load the Lottie into the dp (see Page 2 of example below.) Since you have the same Lottie animation and (I assume) it can only be shown 1 at a time, I used a simple workaround. The Lottie animation (in a dynamic panel container) is outside the repeater, and when it is shown, it is moved to the correct location in front of the repeater. See Page 3 of this sample for details:
https://hg2jem.axshare.com/#id=df363m&p=page_3&g=1
Lottie RP9.rp (81.3 KB)
I applied this to your file in this updated version:
https://vliyux.axshare.com
lottie_doesnt_work.rp (322.6 KB)
Some notes:
The “LottieGoesHere” dynamic panel is shown by default but hides itself in the Loaded event. For some reason, when it was hidden by default the Lottie animation did not always show up.
On the LottieFiles HTML download page, there are some options.
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> <lottie-player src="https://assets3.lottiefiles.com/packages/lf20_7nQsdh.json" background="transparent" speed="1" style="width: 100%; height: 100%;" loop autoplay > </lottie-player>
Wow thx for your effort. I thought about your approach as well, but I wasn’t sure how to move it to the correct repeater. My original file is bigger than the example which I uploaded, so I tried to replicate every of your steps. Unfortunately I had problems to get the lottiefile aligned ad the right position of each repeater row. You can see it if you klick the trigger on the last repeater: https://vliyux.axshare.com/
Anyway you helped me alot and I will use this way.
The first row looks like the Lottie is in the correct position, but it progressively gets placed too high on subsequent rows. My guess is you are placing the Lottie in the correct position, but something else in your repeater is errantly shifting the repeater items down. To me, it looks like it is about 20px off per row, the same as what appears to be the “row gap” which you can see as the blue area under rows 2–N:
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
