Supreme Shortcodes + Animated elements

Animate items when scrolled into view, hovered, or clicked using Animate.css.

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.

See Demo Animations Below

[st_animated type=’fadeInLeft’ trigger=’scroll’ precent=’20’]Animated element goes here[/st_animated]

Customisation Options

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


  • 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


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