![]() The inline frame can be moved anywhere on the page. So within the plugin we created earlier, I changed the width and height to 100% and saved and closed. After some trial and error I realized that within the code itself, the background was set to 90% width and height. ![]() The animation should have filled the entire inline frame. (Note: animations will not show up locally, they have to be viewed after publishing) You should be seeing the animation if everything was entered correctly. Now publish the file again and open the link. This is my workaround since I had trouble getting more than one animation to render on a page any other way) (This is referencing the “Source” page that you made previously. Set the frame target to the page you made with the animation. Make the inline frame the exact same size as the dynamic panel source. (This will be the page you created that dynamic panel on) Then select “Save”īack in Axure, create the page where the animation is actually needed and create an inline frame. ![]() Select the page name on the left and select the arrow to move it to the right. You will also be asked what page(s) to add the plugin to. 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. Set the location to “Inside Dynamic Panels with Name:” and type the exact name of the dynamic panel you made in Axure. On Axure Share find the project that you just published and in the configure menu dropdownĬreate a New Plugin and name it (It doesn’t matter what it is named as long as you can identify it) This will be used as the “Source” for that animation. 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. Name both the page and dynamic panel so they are easy to identify later. In Axure, create a page for the animation and create a dynamic panel on the page at 0,0. 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) We will only be using it to copy the code.Īn 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. I really like Sublime Text, but use whatever you are comfortable with. This will allow you to export animations to svg/canvas/html.Ī text editor of some kind. There are a few things needed before we get started.ĭownload the bodymovin plugin for After Effects. It was actually created by the smart folks at Airbnb 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. Hopefully this is helpful to someone who was searching for a solution like me. I am by no means an expert, so I’m sure there are more efficient ways of doing this. I couldn’t find anything online on how to implement animations rendered with Lottie into Axure prototypes so I did some experimenting.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |