Animation: Icon Boxes

[spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/1″ el_position=”first last”]

Animate your icon boxes in any of the 9 different ways (see examples below). Animation will only occur on appear and you can also set the animation delay to synchronise how your content appears. 

Please note: Animations are disabled on tablet & mobile devices for a better experience.
[/spb_text_block] [blank_spacer height=”60px” width=”1/1″ el_position=”first last”] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″ el_position=”first”] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Fade from left – delay: 0″ animation=”fade-from-left” animation_delay=”0″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Fade In – delay: 400″ animation=”fade-in” animation_delay=”400″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″ el_position=”last”] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Fade from right – delay: 800″ animation=”fade-from-right” animation_delay=”800″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [blank_spacer height=”60px” width=”1/1″ el_position=”first last”] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″ el_position=”first”] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Fade from bottom – delay: 400″ animation=”fade-from-bottom” animation_delay=”400″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Move up – delay: 800″ animation=”move-up” animation_delay=”800″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″ el_position=”last”] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Grow – delay: 1200″ animation=”grow” animation_delay=”1200″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [blank_spacer height=”60px” width=”1/1″ el_position=”first last”] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″ el_position=”first”] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Helix – delay: 0″ animation=”helix” animation_delay=”0″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Flip – delay: 400″ animation=”flip” animation_delay=”400″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″ el_position=”last”] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Pop up – delay: 800″ animation=”pop-up” animation_delay=”800″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [blank_spacer height=”60px” width=”1/1″ el_position=”first last”] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″ el_position=”first”] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Spin – delay: 0″ animation=”spin” animation_delay=”0″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Flip X – delay: 600″ animation=”flip-x” animation_delay=”600″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” width=”1/3″ el_position=”last”] [sf_iconbox image=”ss-star” character=”” type=”boxed-one” title=”Flip Y – delay: 1200″ animation=”flip-y” animation_delay=”1200″] Vestibulum ante ipsum primis in fauc ibus orci luctus et ultrices posuere cubilia Curae; Integer in enim dui. Suspendisse potenti. Sed placerat pellentesque nibh ut varius. Morbi aliquet. [/sf_iconbox] [/spb_text_block] [blank_spacer height=”60px” width=”1/1″ el_position=”first last”]