STEPS
Nowadays it’s rare to find a theme without animation on the elements, in fact, Visual Composer includes a CSS animation field that applies many effects during the page scrolling. A few days ago I was losing my time creating my personal animation field when I thought: why not to use the field that already exists in Visual Composer? I was impressed by the ease of use and lack of information on the net about this field!Note: the Tutorial will improve the code already explained in the related tutorial I linked in the ingredients.
1. Where to include your code
We’ll edit the custom element we just created through the related tutorial (our amazing “VC Infobox“). At the end of tutorial we’ll be able to apply an Animation to the text of our element. We’ll edit the code in 2 points: improving the mapping and editing the HTML.
2. Add the Animation field to your custom element
Visual Composer already has an Animation field and we only need to add it in the 
vc_map() function.
Below I propose the entire mapping code from the related tutorial adding the field we need to the end:
// Map the block with vc_map()
vc_map(
array(
'name' => __('VC Infobox', 'text-domain'),
'base' => 'vc_infobox',
'description' => __('Another simple VC box', 'text-domain'),
'category' => __('My Custom Elements', 'text-domain'),
'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
'params' => array(
array(
'type' => 'textfield',
'holder' => 'h3',
'class' => 'title-class',
'heading' => __( 'Title', 'text-domain' ),
'param_name' => 'title',
'value' => __( 'Default value', 'text-domain' ),
'description' => __( 'Box Title', 'text-domain' ),
'admin_label' => false,
'weight' => 0,
'group' => 'Custom Group',
),
array(
'type' => 'textarea',
'holder' => 'div',
'class' => 'text-class',
'heading' => __( 'Text', 'text-domain' ),
'param_name' => 'text',
'value' => __( 'Default value', 'text-domain' ),
'description' => __( 'Box Text', 'text-domain' ),
'admin_label' => false,
'weight' => 0,
'group' => 'Custom Group',
),
array(
'type' => 'animation_style',
'heading' => __( 'Animation Style', 'text-domain' ),
'param_name' => 'animation',
'description' => __( 'Choose your animation style', 'text-domain' ),
'admin_label' => false,
'weight' => 0,
'group' => 'Custom Group',
),
),
)
);
Code explanation
I will skip all code already explained.- row 38: This is the type name to include the Google Font field in your element.
3. Manage the Animation Data and edit the HTML
For the final step I attach the entire
vc_infobox_html() function explaining the additional rows:
// Element HTML
public function vc_infobox_html( $atts ) {
// Params extraction
extract(
shortcode_atts(
array(
'title' => '',
'text' => '',
'animation' => '',
),
$atts
)
);
//***********************//
// MANAGE ANIMATION DATA //
//***********************//
// Build the animation classes
$animation_classes = $this->getCSSAnimation( $animation );
// Fill $html var with data
$html = '
<div class="vc-infobox-wrap">
<h2 class="vc-infobox-title">' . $title . '</h2>
<div class="vc-infobox-text ' . $animation_classes . '">' . $text . '</div>
</div>';
return $html;
}
Code explanation
- row 10: I added also new parameter “animation” to the extraction function
- row 21: I have built the
$animation_classesusing the VC functiongetCSSAnimation() - row 29: Finally I added the
$animation_classesto my text div
4. Result and Complete Code
This is our frontend result:
And this the complete code for your
And this the complete code for your
my-first-custom-element.php file:
/*
Element Description: VC Info Box
*/
// Element Class
class vcInfoBox extends WPBakeryShortCode {
// Element Init
function __construct() {
add_action( 'init', array( $this, 'vc_infobox_mapping' ) );
add_shortcode( 'vc_infobox', array( $this, 'vc_infobox_html' ) );
}
// Element Mapping
public function vc_infobox_mapping() {
// Stop all if VC is not enabled
if ( !defined( 'WPB_VC_VERSION' ) ) {
return;
}
// Map the block with vc_map()
vc_map(
array(
'name' => __('VC Infobox', 'text-domain'),
'base' => 'vc_infobox',
'description' => __('Another simple VC box', 'text-domain'),
'category' => __('My Custom Elements', 'text-domain'),
'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
'params' => array(
array(
'type' => 'textfield',
'holder' => 'h3',
'class' => 'title-class',
'heading' => __( 'Title', 'text-domain' ),
'param_name' => 'title',
'value' => __( 'Default value', 'text-domain' ),
'description' => __( 'Box Title', 'text-domain' ),
'admin_label' => false,
'weight' => 0,
'group' => 'Custom Group',
),
array(
'type' => 'textarea',
'holder' => 'div',
'class' => 'text-class',
'heading' => __( 'Text', 'text-domain' ),
'param_name' => 'text',
'value' => __( 'Default value', 'text-domain' ),
'description' => __( 'Box Text', 'text-domain' ),
'admin_label' => false,
'weight' => 0,
'group' => 'Custom Group',
),
array(
'type' => 'animation_style',
'heading' => __( 'Animation Style', 'text-domain' ),
'param_name' => 'animation',
'description' => __( 'Choose your animation style', 'text-domain' ),
'admin_label' => false,
'weight' => 0,
'group' => 'Custom Group',
),
),
)
);
}
// Element HTML
public function vc_infobox_html( $atts ) {
// Params extraction
extract(
shortcode_atts(
array(
'title' => '',
'text' => '',
'animation' => '',
),
$atts
)
);
//***********************//
// MANAGE ANIMATION DATA //
//***********************//
// Build the animation classes
$animation_classes = $this->getCSSAnimation( $animation );
// Fill $html var with data
$html = '
<div class="vc-infobox-wrap">
<h2 class="vc-infobox-title">' . $title . '</h2>
<div class="vc-infobox-text ' . $animation_classes . '">' . $text . '</div>
</div>';
return $html;
}
} // End Element Class
// Element Class Init
new vcInfoBox();
