Component animation

The eWizard.js framework supports numerous animation effects from the Animate.css library you can add to your e-Detailer slide components.

Animate.css is a library of ready-to-use, cross-browser animations for use in your e-Detailers projects. eWizard.js supports certain animations from this library and provides some custom options for the animation effects.

Usage

To add animation for the e-Detailer component, add this code to the template markup in the slide Vue instance.

<wiz-image v-animate.click="{ name: 'bounce', duration: 1000, delay: 1000, loop: 2 }"></wiz-image>

Where:

• name is the animation name. See the list of supported animation effects below.

• duration is the animation duration in milliseconds. The default duration is 1000 ms.

• delay is the delay before the animation starts in milliseconds. The default delay is 0 ms.

• loop is the number of times for animation to play. The default value is 1. You can enter the required repeat number or the true value for the infinite play.

• click is the event to start the animation. Use the dot notation after the v-animate directive. For more information see Directive Hook Arguments. If you don't provide the event, eWizard.js uses the default event. The default event is slideenter to start animation when you open the slide. You can specify any DOM event or slideenter, but eWizard Editor supports only the click and slideenter events.

Use the root object keys from the animation effect as the name value. For example, use the rubberBand object key for the rubber animation effect.

Animation effects

The animation effects have the following groups depending on their purpose:

• Entrance

• Emphasis

• Exit

The contents of each group is given below.

Entrance

In eWizard.js, the following entrance animation effects from the Animate.css library are available for the e-Detailer components:

• backInDown—enters from above, briefly overshoots downward, then settles.

• backInLeft—enters from the left with a slight backward overshoot before settling.

• backInRight—enters from the right with a slight backward overshoot before settling.

• backInUp—enters from the bottom, briefly overshoots upward, then settles.

• bounceIn—appears with a bounce effect at its final position.

• bounceInDown—bounces into view from the top.

• bounceInLeft—bounces into view from the left.

• bounceInRight—bounces into view from the right.

• bounceInUp—bounces into view from the bottom.

• fadeIn—fades in without movement.

• fadeInBottomLeft—fades in while moving diagonally from the bottom left.

• fadeInBottomRight—fades in while moving diagonally from the bottom right.

• fadeInDown—fades in while moving down from the top.

• fadeInLeft—fades in while moving right from the left.

• fadeInRight—fades in while moving left from the right.

• fadeInTopLeft—fades in while moving diagonally from the top left.

• fadeInTopRight—fades in while moving diagonally from the top right.

• fadeInUp—fades in while moving up from the bottom.

• rotateIn—rotates into view at the center.

• rotateInDownLeft—rotates in from the top left while moving downward.

• rotateInDownRight—rotates in from the top right while moving downward.

• rotateInUpLeft—rotates in from the bottom left while moving upward.

• rotateInUpRight—rotates in from the bottom right while moving upward.

• slideInDown—slides in from the top.

• slideInLeft—slides in from the left.

• slideInRight—slides in from the right.

• slideInUp—slides in from the bottom.

• zoomIn—scales up into view from the center.

• zoomInDown—scales up while moving down from the top.

• zoomInLeft—scales up while moving right from the left.

• zoomInRight—scales up while moving left from the right.

• zoomInUp—scales up while moving left from the right.

Emphasis

In eWizard.js, the following emphasis animation effects from the Animate.css library are available for the e-Detailer components:

• bounce—moves up and down repeatedly, simulating a bouncing motion.

• heartBeat—scales up and down in quick pulses, mimicking a heartbeat.

• pulse—gently scales up and down once to attract attention.

• rubberBand—stretches and snaps back, like elastic returning to shape.

• shakeX—shakes horizontally from side to side.

• shakeY—shakes vertically up and down.

• swing—rotates back and forth around the top center, like a hanging object.

Exit

In eWizard.js, the following exit animation effects from the Animate.css library are available for the e-Detailer components:

• backOutDown—moves downward with a slight backward motion before disappearing.

• backOutLeft—moves left with a brief backward motion before disappearing.

• backOutUp—moves upward with a slight backward motion before disappearing.

• bounceOut—shrinks and bounces before disappearing at the center.

• bounceOutDown—bounces downward and exits the screen.

• bounceOutLeft—bounces left and exits the screen.

• bounceOutRight—bounces right and exits the screen.

• bounceOutUp—bounces upward and exits the screen.

• fadeOut—fades out without movement.

• fadeOutBottomLeft—fades out while moving diagonally toward the bottom left.

• fadeOutBottomRight—fades out while moving diagonally toward the bottom right.

• fadeOutDown—fades out while moving downward.

• fadeOutLeft—fades out while moving left.

• fadeOutRight—fades out while moving right.

• fadeOutTopLeft—fades out while moving diagonally toward the top left.

• fadeOutTopRight—fades out while moving diagonally toward the top right.

• fadeOutUp—fades out while moving upward.

• rotateOut—rotates out from the center and disappears.

• rotateOutDownLeft—rotates while moving toward the bottom left.

• rotateOutDownRight—rotates while moving toward the bottom right.

• rotateOutUpLeft—rotates while moving toward the top left.

• rotateOutUpRight—rotates while moving toward the top right.

• slideOutDown—slides out downward.

• slideOutLeft—slides out to the left.

• slideOutRight—slides out to the right.

• slideOutUp—slides out upward.

• zoomOut—scales down and disappears at the center.

• zoomOutDown—scales down while moving downward.

• zoomOutLeft—scales down while moving left.

• zoomOutRight—scales down while moving right.

• zoomOutUp—scales down while moving upward.