Animation

Overview

Web animations are commonly used to keep visitors engaged and interested. Animations for some ALB elements can be turned on or off from the Advanced Layout Builder element’s Animation tab which can be accessed from the elements edit option.

A nice example usage of animation can be seen here rightsline.

Customization

How to use the snippets?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Customizing animation for ALB elements

Enfold uses a variety of CSS keyframe animations to animate the ALB elements. You can find examples of the keyframe animations in the following files:

/enfold/css/shortcodes.css
/enfold/css/layout.css

Look for the animation section and copy the keyframes to your child theme styles.css and configure it to suit your needs.

Some of the animation variables used in the enfold theme are :

avia_appear
avia_image_appear
avia_hotspot_appear
avia_appear_short
avia_msonry_show
avia_fade_move_down
avia_slide_down
avia_expand
avia-ltr
avia-rtl
avia-btt
avia-ttb
avia-fadein
avia-rotateIn
avia-rotateInUpLeft
avia-rotateInUpRight
avia-bg-move
caption-right
caption-left
caption-top
caption-bottom
av_pulsate
sonarEffect
avia_pop
avia_pop_small
avia_pop_loader
avia_shrink
av-load8

Animating slider title, caption and buttons

The slider title, caption, and buttons can be animated using custom CSS animation or you can try any of the animation variables used in the enfold theme in the CSS code provided below.

Example of animated slider caption, title and buttons.

/* Slider title, content and button animation */

.avia_transform .active-slide .avia-caption-title, 
.avia_transform .active-slide .avia-caption-content, 
.avia_transform .active-slide .avia-slideshow-button-2, 
.avia_transform .active-slide .avia-slideshow-button {

    -webkit-animation: avia_pop 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; 
    animation:         avia_pop 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; 
}

Disable animation sitewide

To disable all animation sitewide please use the below CSS

 /* Disable animation sitewide */
*{
opacity: 100!important;
 /*CSS transitions*/
 -o-transition-property: none !important;
 -moz-transition-property: none !important;
 -ms-transition-property: none !important;
 -webkit-transition-property: none !important;
 transition-property: none !important;
 /*CSS transforms*/
 -o-transform: none !important;
 -moz-transform: none !important;
 -ms-transform: none !important;
 -webkit-transform: none !important;
 transform: none !important;
 /*CSS animations*/
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}

Disable animation on specific page or post

To disable animation on a specific page or post. First, we have to find the page/post ID class name.

Right-click anywhere on the page or press F12(on chrome) and look for the “body” tag in the inspect box. For WordPress post, you will notice “post-id-xxx” and for WordPress pages a “page-id-xxx” class. Copy the class name and replace the page or post ID class in the code below before adding it to your site.

 /* Disable animation on specific page or post */ 

.page-id-xxx * {
opacity: 100!important;
 /*CSS transitions*/
 -o-transition-property: none !important;
 -moz-transition-property: none !important;
 -ms-transition-property: none !important;
 -webkit-transition-property: none !important;
 transition-property: none !important;
 /*CSS transforms*/
 -o-transform: none !important;
 -moz-transform: none !important;
 -ms-transform: none !important;
 -webkit-transform: none !important;
 transform: none !important;
 /*CSS animations*/
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}

Disable animation on a section

To disable animation on a section, we recommend adding your page elements that you wish to have the animation disabled on, inside a color section and give it a custom ID #no-animation and use the CSS below.

 /* No Animation */ 
#no-animation {
opacity: 100!important;
 /*CSS transitions*/
 -o-transition-property: none !important;
 -moz-transition-property: none !important;
 -ms-transition-property: none !important;
 -webkit-transition-property: none !important;
 transition-property: none !important;
 /*CSS transforms*/
 -o-transform: none !important;
 -moz-transform: none !important;
 -ms-transform: none !important;
 -webkit-transform: none !important;
 transform: none !important;
 /*CSS animations*/
 -webkit-animation: none !important;
 -moz-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;
}

Icon list animation

List Title 1
List Title 2
List Title 3

To remove the icon list animation please use the below CSS

 /* Remove icon list animation */ 
/*iconlist animation*/
.avia_transform .avia-icon-list.av-iconlist-big .avia_start_animation .iconlist_icon,
.avia_transform .avia-icon-list.av-iconlist-big .iconlist_icon {
-webkit-animation: none!important; 
animation: none!important; 
opacity: 1;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
}

To add your own custom keyframe animation to icon list icons please use the below code and replace the animation value with your keyframe animation name.

 /* Custom animation for icon list icon */ 
.avia_transform .avia-icon-list.av-iconlist-big .avia_start_animation .iconlist_icon{
-webkit-animation: my_custom_keyframe_animation 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; /* Safari 4+ */
animation:         my_custom_keyframe_animation 1s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; /* IE 10+ */
}

Icon Animation

To add custom animation to the icon elements using keyframes please use the below CSS.

 
/* Icon element animation*/
.avia_transform .avia_start_delayed_animation.av_font_icon{
-webkit-animation: my_custom_keyframe_animation; 
animation:         my_custom_keyframe_animation; 
}

To remove the icon loading animation please use the below CSS.

/* Remove icon loading animation*/ 
.avia_transform .av_font_icon,
.avia_transform .avia_start_delayed_animation.av_font_icon {
-webkit-animation: none!important; 
animation:         none!important; 
opacity: 1;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
}

Progressbar animation

Skill

To remove the progress bar animation please use the CSS below.

 /* Remove progress bar animation*/

.av-animated-bar .avia-progress-bar div.progress .bar,
.avia_transform #top .avia-progress-bar div.progress.avia_start_animation .bar-outer{
-webkit-animation: none!important;
animation:         none!important;
}

#top .avia-progress-bar div.progress .bar-outer, 
#top .avia-progress-bar div.progress .bar {
    width: 100%;    
}

Testimonial image animation

To remove the testimonial image animation please use the below CSS

 /* Testimonial image animation */

.avia_transform .avia-testimonial .avia-testimonial-image,
.avia_transform .avia_start_animation.avia-testimonial .avia-testimonial-image{
  -webkit-animation: none!important; 
  animation:         none!important; 
  opacity: 1;
  -webkit-transform:scale(1);
  transform:scale(1);
}

Disable Gallery Image Animation

To disable the gallery image load animation please use the CSS below.

 /* Gallery image load animation */

.avia_transform .avia-gallery-thumb img.avia_start_animation,
#top div .avia-gallery img {
    -webkit-animation: none!important;
    animation: none!important;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

Disable Masonry gallery image load animation

To disable the masonry gallery image loading animation please use the CSS below.

 /* Masonry image load animation*/ 
.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{
-webkit-animation: none; /* Safari 4+ */
-moz-animation: none; /* Fx 5+ */
animation: none; /* IE 10+ */
}
.av-masonry-entry {
opacity: 1 !important;
visibility: visible !important;
}