Animation

Animate Everything, Everywhere!

Premium Vafpress Animation Plugin is bundled exclusively with Qualia . With tons of features and full control over lots of stuff, you will be able to animate everything from just a simple to a sophisticated one. Whether it is a paragraph, a text line, an image, or other components, you can wrap the element with our animation shortcode.

[animation effect=”fade-in” duration=”1s” trigger=”loaded” delay=”0s” iteration=”1″ timing=”ease” fill_mode=”forwards”]clock-bg[/animation][animation effect=”rotate-to-360deg-anchor-middle-center” duration=”72s” trigger=”loaded” delay=”0s” iteration=”infinite” timing=”linear” fill_mode=”forwards” class=”qualia-clock-element”]clock-hour[/animation][animation effect=”rotate-to-360deg-anchor-middle-center” duration=”6s” trigger=”loaded” delay=”0s” iteration=”infinite” timing=”linear” fill_mode=”forwards” class=”qualia-clock-element”]clock-minute[/animation]

clock-anchor

[animation effect=”fade-in-short-from-top” duration=”1s” trigger=”loaded” delay=”1s” iteration=”1″ timing=”ease” fill_mode=”forwards”]

Animate a Line of Text

[/animation]

[animation effect=”fade-in-short-from-bottom” duration=”1s” trigger=”loaded” delay=”2s” iteration=”1″ timing=”ease” fill_mode=”forwards”]

Or maybe you want to animate a long paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac auctor ligula, vel aliquet libero. In faucibus feugiat lectus imperdiet gravida. Nam ut varius mi. Cras ligula mauris, tristique ultricies fringilla eget, ornare quis justo. Vestibulum vulputate enim nisi, quis dictum enim faucibus nec. Ut sit amet auctor quam.

[/animation]

[animation effect=”scale-in” duration=”0.5s” trigger=”loaded” delay=”3s” iteration=”1″ timing=”ease” fill_mode=”forwards”] [/animation]     [animation effect=”scale-in” duration=”0.5s” trigger=”loaded” delay=”3.5s” iteration=”1″ timing=”ease” fill_mode=”forwards”] [/animation]     [animation effect=”scale-in” duration=”0.5s” trigger=”loaded” delay=”4s” iteration=”1″ timing=”ease” fill_mode=”forwards”] [/animation]

shadow-ornament

This animation module is really customizable. It has several options which you can customize to make your animation just perfect!

  • Choose one from 150++ effects options
  • Set animation duration
  • Set animation trigger

    • once loaded
    • inview
    • toggle hover
    • hovered
    • toggle click
    • clicked
  • Set delay time after triggered until the animation start
  • Set number of animation iteration or just make it infinite iteration
  • Choose the timing function or make your own custom timing function
  • Advanced settings on “Direction” and “Fill” modes
shadow-ornament

[animation effect=”scale-in” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Scale In

[animation effect=”scale-out” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Scale Out

[animation effect=”scale-in-out” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Scale In Out

[animation effect=”fade-in” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Fade In

[animation effect=”fade-out” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Fade Out

[animation effect=”fade-in-out” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Fade In Out

[animation effect=”fade-in-short-from-left” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Fade In Short from Left

[animation effect=”fade-in-short-from-right” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Fade In Short from Right

[animation effect=”fade-in-short-from-top” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Fade In Short from Top

[animation effect=”fade-in-short-from-bottom” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Fade In Short from Bottom

[animation effect=”fade-out-short-to-left” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Fade Out Short to Left

[animation effect=”fade-out-short-to-right” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Fade Out Short to Right

[animation effect=”fade-out-short-to-top” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Fade Out Short to Top

[animation effect=”fade-out-short-to-bottom” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Fade Out Short to Bottom

[animation effect=”rotate-to-180deg-anchor-middle-center” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Rotate to 180deg @ Middle Center

[animation effect=”rotate-from–270deg-anchor-middle-center” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Rotate from -270deg @ Middle Center

[animation effect=”rotate-from-90deg-anchor-bottom-right” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Rotate from 90deg @ Bottom Right

[animation effect=”rotate-to-180deg-anchor-middle-right” duration=”1s” trigger=”clicked” delay=”0s” iteration=”1″ timing=”linear” fill_mode=”forwards”]shortcodes-animation-object[/animation]

Rotate to 180deg @ Middle Right