10. Finally the full list of AnimationName you can use:

bounce

flash

pulse

rubberBand

shake

headShake

swing

tada

wobble

jello

bounceIn

bounceInDown

bounceInLeft

bounceInRight

bounceInUp

bounceOut

bounceOutDown

bounceOutLeft

bounceOutRight

bounceOutUp

fadeIn

fadeInDown

fadeInDownBig

fadeInLeft

fadeInLeftBig

fadeInRight

fadeInRightBig

fadeInUp

fadeInUpBig

fadeOut

fadeOutDown

fadeOutDownBig

fadeOutLeft

fadeOutLeftBig

fadeOutRight

fadeOutRightBig

fadeOutUp

fadeOutUpBig

flipInX

flipInY

flipOutX

flipOutY

lightSpeedIn

lightSpeedOut

rotateIn

rotateInDownLeft

rotateInDownRight

rotateInUpLeft

rotateInUpRight

rotateOutDownLeft

rotateOutDownRight

rotateOutUpLeft

rotateOutUpRight

hinge

jackInTheBox

rollIn

rollOut

zoomIn

zoomInDown

zoomInLeft

zoomInRight

zoomInUp

zoomOut

zoomOutDown

zoomOutLeft

zoomOutRight

zoomOutUp

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

Check out all the animations here!

Advanced Usage

1. You may also want to use an infinite animations for some elements.

2. Finally the full list of AnimationName for infinite loop animations you can use:

infinite.

to any AnimationName you use.

In this case you should add a prefix

infinite.bounce

infinite.flash

infinite.pulse

infinite.rubberBand

infinite.shake

infinite.headShake

infinite.swing

infinite.tada

infinite.wobble

infinite.jello

infinite.bounceIn

infinite.bounceInDown

infinite.bounceInLeft

infinite.bounceInRight

infinite.bounceInUp

infinite.bounceOut

infinite.bounceOutDown

infinite.bounceOutLeft

infinite.bounceOutRight

infinite.bounceOutUp

infinite.fadeIn

infinite.fadeInDown

infinite.fadeInDownBig

infinite.fadeInLeft

infinite.fadeInLeftBig

infinite.fadeInRight

infinite.fadeInRightBig

infinite.fadeInUp

infinite.fadeInUpBig

infinite.fadeOut

infinite.fadeOutDown

infinite.fadeOutDownBig

infinite.fadeOutLeft

infinite.fadeOutLeftBig

infinite.fadeOutRight

infinite.fadeOutRightBig

infinite.fadeOutUp

infinite.fadeOutUpBig

infinite.flipInX

infinite.flipInY

infinite.flipOutX

infinite.flipOutY

infinite.lightSpeedIn

infinite.lightSpeedOut

infinite.rotateIn

infinite.rotateInDownLeft

infinite.rotateInDownRight

infinite.rotateInUpLeft

infinite.rotateOutUpRight

infinite.hinge

infinite.jackInTheBox

infinite.rollIn

infinite.rollOut

infinite.zoomIn

infinite.zoomInDown

infinite.zoomInLeft

infinite.zoomInRight

infinite.zoomInUp

infinite.zoomOut

infinite.zoomOutDown

infinite.zoomOutLeft

infinite.zoomOutRight

infinite.zoomOutUp

infinite.slideInDown

infinite.slideInLeft

infinite.slideInRight

infinite.slideInUp

infinite.slideOutDown

infinite.slideOutLeft

infinite.slideOutRight

infinite.slideOutUp

Full example:

License

Animate.css is licensed under the MIT license. (link: http://opensource.org/licenses/MIT)

Contributing

Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues. I only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in attached .rp file. That last one is important.

© 2018 Axurist

Proudly made by

DK

Basic Usage

1. Add any name to the widget you want to animate. It's very important, because you'll have to apply animations to a specific widget.

2. Choose a necessary interaction for your widget - it's about when you wish your widget to be animated. f.e.: OnClick

7. In the same Case add "Open Link" action and choose "Open in New Window/Tab" option.

8. Click "Link to an external url or file" radio button and add this line of code:

5. Change text YourTargetWidgetName to the name of your widget you want to be animated

6. Change text AnimationName to the name of animation you want to use for your widget

As a result you'll have something like that:

3. Add "Set Variable Value" action in opened Case Editor window and choose "AnimationScript" variable.

4. In "Set variable to" droplist choose "Value" and add this line of code:

javascript:@AnimationName<,>widgetname:YourTargetWidgetName

[[AnimationScript]]

As a result you'll have something like that:

9. Then click "OK" and you're done!

javascript:@infinite.rotateIn<,>widgetname:YourTargetWidgetName

3. You may also want to stop your infinite animation somewhen. So, you have to use the same instruction, but for AnimationName use this name: stop.infinite - it will stop infinite loop.

Full example:

javascript:@stop.infinite<,>widgetname:YourWidgetNameWithInfiniteAnimation

Animate.css for Axure

release

v2.0

cdnjs

v3.5.2

axure

v8.1.0

Just-add-water CSS animations

is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home

Installation

If you start a new project from scratch, simply do the following: (starting a new project with this plugin is recommended)

animate.css for Axure

pages, sliders, and general just-add-water-awesomeness.

The original animations plugin for websites were made by talented Daniel Eden and I'm very thankful to him for this job. "Animation.css for Axure" widget is based on his work and brings all that cool animations to Axure RP projects.

And of course it wouldn't work without AxureEx Javascript "engine" is made by awesome Sam Hepworth.


Enjoy it!

1. Download .rp file by clicking this link

2. Open downloaded file

3. Just start creating your project!

That's it! That's all what you have to do to start! All animations're already inside. Just start using them with the "Basic Usage" instruction below.

Note: in the demo file you'll see a Master called "animate.axure" -> it's very important to add this Master to every page of your project! Don't forget about it or animations won't work on pages without that Master.

Change Logs

1. Fixed: Missing flip animation.

2. Added: Change Log

Version 1.0.2 – April 20, 2018

1. Added: Copyright note

Version 1.0.1 – April 19, 2018

1. Initial Release

Version 1.0.0 – April 18, 2018

1. Added: "No return" (one time) animations.

Version 2.0.0 – April 25, 2018

4. When you use a standart AnimationName like

a) animation executes

b) your widget returns back to it's start position

c) you can execute animation one more time

then plugin works like this:

It was good for tasks when you need to repeat animation effect with every new action. But It wasn't good when you tried to use hide animations like "bounceOut" and so on, because in such cases you need your animation to execute just one time only.

bounce

.noreturn

to any AnimationName you use and animation will be executed just one time.

To solve this problem you can add a suffix

Full example:

javascript:@rotateIn.noreturn<,>widgetname:YourTargetWidgetName