Sometimes we want to add additional or predefined class on visual composer elements (eg. row, inner row, column) to implement jquery effect. To achieve this on functions.php add a new vc_add_param
vc_add_param("vc_row", array( "type" => "dropdown", "group" => "Animation", "class" => "", "heading" => "Style", "param_name" => "type", "value" => array( "None" => "", "Fade Up" => "fade-up", "Fade Down" => "fade-down", "Fade Left" => "fade-left", "Fade Right" => "fade-right", ) ));
Then copy vc_row in js_composer/include/templates/shortcodes to your theme /vc_templates/vc_row.php
Add the new class
/**ISN Custom CSS**/ if ( ! empty( $type ) ) { $css_classes[] = "$type"; }
For custom data-attributes, below $wrapper_attributes array (line 72), add this code
/**ISN Custom Attributes**/ if ( ! empty( $type ) ) { $wrapper_attributes[] = 'data-rel="' . esc_attr( $type ) . '"'; }
Combining with ScrollReveal plugin, we can add animation to row/inner row/column
ScrollReveal().reveal('.fade-in', { delay: 400, duration: 750, distance: '0', reset: true });