- Hover Buttons
- Image Scroller
- Icon Boxes
- Buttons
- Boxes + Callouts
- Carousel
- Contact Form
- Lines + Dividers
- Lists
- Tables
- Google Maps
- Fancybox
- Google Trends
- Google Docs
- Google Charts
- Audio
- Video
- Related
- Responsive Columns
- Retina Icons
- Progress Bars
- Tabs
- Toggle
- Tooltip + Popover + Modal
- Typography
- SVG Drawings
- Spinning Icons
- Sections - Parallax
- Animated
- Swiper
- Icon Melon
- Accordion
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
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.
