@H5magAnimations
H5mag features an easy to use animation system.
How to add an animation
- Click the element you want to animate.
- Click the animation halo-button
- Select the animation type you want
- Optional: you can customize the duration, and delay of the animation. You can also choose to animate the element at the same time with the previous element or after a previous element's animation is done. There is also an option to start the animation after a feedback form has been submitted.
List of animation types
Appearance effects
| Name | Direction | Options | Description |
|---|---|---|---|
| Move in | From left From right From top From bottom |
Fade in Bounce |
Moves the element in view from the top, bottom, left or right. |
| Fade in | Fades the element into view in place. | ||
| Zoom | Enlarge Enlarge and rotate left Enlarge and rotate right Shrink Shrink and rotate left Shrink and rotate right |
Bounce | The element gets enlarged or shrinks down. |
| Flip in | Vertical Horizontal |
Twists the element around the z-axis whilst fading the element in. | |
| Roll in | The element fades and rotates in place. Very nice with a sequence of elements from left to right. | ||
| Drop | Element drops from the top, with a big rubber bounce. | ||
| Lightspeed | From left From right |
||
| Dispense | From left From right |
Bounce | The element slides in view from a hidden origin. Like how a receipt is dispensed from a thermal printer. Nice in combination with for instance a vertical line. |
| Wipe | From left From right From top From bottom |
The element starts invisible and starts to show according to the wiping direction. | |
| Appear | Only shows the element when certain conditions are met. |
Attentive effects
| Name | Direction | Options | Description |
|---|---|---|---|
| Flashing | Blinks the element twice (note that the element does not get hidden before the animation). | ||
| Pop | Pops in and out (enlarges and shrinks a few times). | ||
| Pulsation | Three times Bigger/harder |
Scales the element slightly before returning to its original position. It can also pulse three times (more attention) and pulse bigger/harder (enlarge more between pulses). | |
| Swinging | Swings the element. | ||
| Tada | Tada! | ||
| Wobbling | Wobble, wobble. | ||
| Subtle | From left From right |
Fade | The element has a very subtle movement and scales slightly, similar to the Ken Burns effect. Good for large photography to give some depth to your publication. |
| Float | Float to left Float to right Play infinitely Bigger/harder |
The element floats a little bit up and down, left or right according to the direction. |
Credits
Some of these animations were originally authored by third parties:
Last modified: