[intense_content_section]
<h2>Introduction</h2>
[intense_row padding_top="0"]
[intense_column size="9" medium_size="9"]
The animated shortcode is one of our most popular. It allows you to animate just about anything on a page. Animations can be a big pain. They require advanced knowledge of CSS and can quickly bloat your site. Intense alleviates the pain by providing a long list of available animations. Also, the required CSS is added on-demand instead of in one big CSS file. With Intense, go ahead and add animations to your site without the worry.

Animations can be triggered in a few different ways:
<ul>
<li>Delay - triggered after a set amount of time</li>
<li>Click - triggered when a the user clicks</li>
<li>Hover - triggered when the mouse is moved over an item</li>
<li>Scroll - triggered when an item is scrolled into view</li>
</ul>

Examples of the animations and triggers can be found below. We add animations all the time. If you have an animation you would like to see, let us know.
[/intense_column]
[intense_column size="3" medium_size="3"]
[intense_heading font_size="200" font_color="primary" margin_top="0" margin_bottom="0"]
[intense_animated type="floating" trigger="delay"]
[intense_icon type="map-marker" color="primary"]
[/intense_animated]
[/intense_heading]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Delayed Animations</h2>

<h1 class="mega">
[intense_animated type="bounceInRight" trigger="delay" delay="1000"]
[intense_icon type="star" size="1" color="gold" spin="1"]
[/intense_animated]
[intense_animated type="fadeInRightBig" trigger="delay" delay="200"]D[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="400"]e[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="600"]l[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="800"]a[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="1000"]y[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="1200"]e[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="1400"]d[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="1600"][/intense_animated]
[intense_animated type="fadeInRightBig" trigger="delay" delay="1800"] A[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="2000"]n[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="2200"]i[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="2400"]m[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="2600"]a[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="2800"]t[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="3000"]i[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="3200"]o[/intense_animated][intense_animated type="fadeInRightBig" trigger="delay" delay="3400"]n[/intense_animated]
[intense_animated type="bounceInRight" trigger="delay" delay="4500"]
[intense_icon type="exclamation"]
[/intense_animated]
</h1>

In this example, each icon and letter is animated with a different delay. Delays can also be good if you want to add above-the-fold content that doesn't appear right away. This adds a little extra emphasis to that item.

Refresh the page to see the example again.
[/intense_content_section]
[intense_content_section]
<h2>Scroll Triggered Animations</h2>

The images below will appear as you scroll down the page. This effect helps engage users and makes a website more dynamic. Notice how the top image and the lower images use different animations. As part of the animated shortcode, you can control how much of the element must be visible before the animation is triggered. For example, the first image will trigger when 30% of it is visible.

[intense_animated type="swingInDownForward" scroll_percent="30"]
[intense_image image="357" size="postExtraWide" title="laundry" bgcolor="#ffffff"]
[/intense_animated]
[intense_row]
[intense_column size="6" medium_size="6"]
[intense_animated type="fadeInLeft" scroll_percent="40"]
[intense_image image="358" size="postWide" title="old alley" bgcolor="#ffffff"]
[/intense_animated]
[/intense_column]
[intense_column size="6" medium_size="6"]
[intense_animated type="fadeInRight" scroll_percent="40"]
[intense_image image="359" size="postWide" title="old alley" bgcolor="#ffffff"]
[/intense_animated]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>[intense_template template="animation-count"] Animations</h2>
[intense_template template="animations"]
[/intense_content_section]

[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]