Animate.css for Axure

advanced-prototyping
#1

Hello, everyone!

I would like to introduce you a new plugin I’ve made for Axure… A simple but useful Axure plugin with big set of CSS animations for your projects. You can add many new animations for your OnClick, OnMouseEnter, OnPageLoad, etc. interactions that are not available in Axure for now.
It’s very easy to install, very simple to use and…

It’s ABSOLUTELY FREE :facepunch::+1:

Demo is here :point_left:
Instruction is here
ZIP-file with plugin is here

Enjoy it & build awesome prototypes!

P.S. I’ve tried to make it simple to use for even Axure beginners.
P.P.S. I know that using pure JS is the much more easy way to do the same, but I wanted to do it with maximum Axure built-in functions, because… Look at P.S. above :slight_smile:
P.P.P.S. It’s plugin is based on the work of sam.hepworth here: Improved Javascript Injection - and I’m really thankful for his work! You’re awesome, Sam :muscle:

Visual State: Outer Shadow
Improved Javascript Injection
#2

I’ll be thankful for your feedback and ideas to improve this plugin.

And of course, if you’ll have some questions while using it, I’m here to help!

#3

Flip doesn’t seem to work :frowning:

Schermafdruk 2018-04-20 11.17.55.png1038×960 66.4 KB

#4

Fixed! You can download a new file: http://animate.axurist.com/animate.axurist.zip

Thank you, buddy! :beers:

#5

This is absolutely amazing but I need to know how to get it to work with a new file vs. starting in the original file. I can’t seem to get it to work in a new file. It just opens multiple new windows when I load it in the browser. I’ve made sure to follow all the directions… Any help would be immensely appreciated. -Sarah

#6

Hi, Sarah!

  1. http://take.ms/JEbhk - after that you have to paste all copied widgets to your new .rp file and make a Master of them
  2. http://take.ms/fANyD - then create the same webfont in Preview options of your new .rp file
  3. http://take.ms/g7sBv - then create the same webfont in Preview options of your new .rp file
  4. then select any Event for any of your widgets and add Open in New Window Tab action -> instead of link you have to add something like this: javascript:@shake<,>widgetname:MyWidgetName

And it works! You can see a simple example in attach made with the same instruction: ex1.rp (112.6 KB)

#7

Hi DeeKey,

Thank you so much for bringing CSS animations to Axure prototypes and for making it so easy to use the animations. Awesome work!

/Sam

#8

It’s all thanks to you, Sam! I’ve just found an idea of using it in daily work. :slight_smile:

unlisted #9
closed #10