Animated allows for animating items on a page. There are many different options to choose from with some starting hidden and others ending hidden. Animations can be triggered when an item on the page has the mouse hovered over it, when the user scrolls the page so that the item is visible, or when something is clicked with the mouse.

You can even animate another Supreme Shortcode! Beautiful Supreme Shortcode called Icon Box. You can simply pop it into the animated shortcode as its content and voila!
Click me!

You can animate ordinary block of text. You can see the actual animation for this example by clicking on this block of text at any time – how many times you wish.

It’s very simple to configure and it gives dynamic to your page.

Animation Types

  • Attention Seekers: bounce, flash, pulse, shake, swing, tada, wiggle, wobble
  • Bouncing Entrances: bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceInUpExpand
  • Bouncing Exits: bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp
  • Fading Entrances: fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig
  • Fading Exits: fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig
  • Flippers: flip, flipInDownBackward, flipInDownForward, flipInLeftBackward, flipInLeftForward, flipInRightBackward, flipInRightForward, flipInUpBackward, flipInUpForward, flipInX, flipInY, flipOutX, flipOutY
  • Lightspeed: lightSpeedIn, lightSpeedOut
  • Rotating Entrances: rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
  • Rotating Exits: rotateDown, rotateLeft, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, rotateRight, rotateUp
  • Slide: slideDown, slideDownReturn, slideLeft, slideLeftReturn, slideRight, slideRightReturn, slideUp, slideUpReturn
  • Specials: hinge, rollIn, rollOut

 

Trigger

  • scroll – triggered when the user scrolls their browser window
  • hover – triggered when the user’s mouse hovers over the item
  • click – triggered when the user clicks on an item

 

Percent

  • Animate when given % of item is in view. This only applies to the trigger.