@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. |
Animation clipping
*) The Dispense and Wipe animations use clipping to create these effects. Please keep this in mind when using these animation types, as content that sticks out of an animating section will not be visible during or after animations
Credits
Some of these animations were originally authored by third parties:
Last modified: