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