Below, you’ll find a detailed guide on how to add the Animate It! Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Animate It! Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Animate It! Plugin and the shortcodes it provides:
"Animate It! is a dynamic WordPress plugin designed to add fun, captivating animations to your website. With easy-to-use features, you can breathe life into your content and engage visitors like never before."
- [edsanimate_start]
- [edsanimate_end]
- [edsanimate]
Animate It! [edsanimate_start] Shortcode
The ‘edsanimate_start’ shortcode is part of the Animate-It plugin, which adds animations to WordPress elements. It triggers the start of an animation, with attributes controlling the type, timing, and conditions of the animation.
Shortcode: [edsanimate_start]
Parameters
Here is a list of all possible edsanimate_start shortcode parameters and attributes:
entry_animation_type– The type of animation when the element appears.animate_on– Specifies when the animation is triggered, either on scroll or on load.custom_css_class– The custom CSS class for the animated element.entry_delay– The delay before the entry animation starts.entry_duration– The duration of the entry animation.entry_timing– The timing function for the entry animation.exit_animation_type– The type of animation when the element disappears.exit_delay– The delay before the exit animation starts.exit_duration– The duration of the exit animation.exit_timing– The timing function for the exit animation.animation_repeat– The number of times the animation should repeat.keep– Specifies if the animation should stay after it’s done.scroll_offset– The offset distance to trigger animation on scroll.
Examples and Usage
Basic example – A simple usage of the ‘edsanimate_start’ shortcode to apply an entry animation to a div element.
[edsanimate_start entry_animation_type="fadeIn" animate_on="scroll" /]For advanced examples, we can utilize multiple parameters to control the animation’s behavior and timing more precisely.
Advanced example 1 – Applying an entry and exit animation to a div element, with specified delays, durations, and repeat count. We also set the animation to keep its last known state and to activate on scroll with a specific offset.
[edsanimate_start entry_animation_type="fadeIn" entry_delay="1s" entry_duration="1s" exit_animation_type="fadeOut" exit_delay="2s" exit_duration="2s" animation_repeat="3" keep="true" animate_on="scroll" scroll_offset="50%" /]Advanced example 2 – Using the shortcode to apply an entry animation with a custom CSS class, timing function, and to hide the element on load until the animation is triggered.
[edsanimate_start entry_animation_type="bounceIn" animate_on="load" custom_css_class="myCustomClass" entry_timing="ease-in-out" /]PHP Function Code
In case you have difficulties debugging what causing issues with [edsanimate_start] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('edsanimate_start', array( $this, 'edsanimate_start_handler' ) );Shortcode PHP function:
function edsanimate_start_handler( $attributes, $content = null ) {
$device_type = $this->detect_device();
$enable_smart_phone = get_option('eds_enable_on_phone');
$enable_tablet = get_option('eds_enable_on_tab');
$enable= ($device_type=='phone' && intval($enable_smart_phone))
|| ($device_type =='tablet' && intval($enable_tablet))
|| ($device_type =='computer');
if( !$enable ) {
return '';
}
$attributes = array_map( 'sanitize_text_field', $attributes );
$attributes = array_map( 'esc_attr', $attributes );
$hide_on_load_css_class = '';
$entry_animation = isset( $attributes['entry_animation_type'] ) ? $attributes['entry_animation_type']: '';
if( 'scroll' == $attributes['animate_on'] || 'load' == $attributes['animate_on'] ) {
$hide_on_load_css_class = ( in_array( $entry_animation, $this->in_animations ) ) ? 'edsanimate-sis-hidden' : '';
}
$content = array(
'<div class="eds-animate ', $hide_on_load_css_class, ' ', isset( $attributes['custom_css_class'] ) ? $attributes['custom_css_class'] : '', '"',
' data-eds-entry-animation="', $entry_animation, '"',
' data-eds-entry-delay="', isset( $attributes['entry_delay'] ) ? $attributes['entry_delay'] : '', '"',
' data-eds-entry-duration="', isset( $attributes['entry_duration'] ) ? $attributes['entry_duration'] : '', '"',
' data-eds-entry-timing="', isset( $attributes['entry_timing'] ) ? $attributes['entry_timing'] : '', '"',
' data-eds-exit-animation="', isset( $attributes['exit_animation_type'] ) ? $attributes['exit_animation_type'] : '', '"',
' data-eds-exit-delay="', isset( $attributes['exit_delay'] ) ? $attributes['exit_delay'] : '', '"',
' data-eds-exit-duration="', isset( $attributes['exit_duration'] ) ? $attributes['exit_duration'] : '', '"',
' data-eds-exit-timing="', isset( $attributes['exit_timing'] ) ? $attributes['exit_timing'] : '', '"',
' data-eds-repeat-count="', isset( $attributes['animation_repeat'] ) ? $attributes['animation_repeat'] : '', '"',
' data-eds-keep="', isset( $attributes['keep'] ) ? $attributes['keep'] : '', '"',
' data-eds-animate-on="', isset( $attributes['animate_on'] ) ? $attributes['animate_on'] : '', '"',
' data-eds-scroll-offset="', isset( $attributes['scroll_offset'] ) ? $attributes['scroll_offset'] :'', '">' );
return implode( "", $content );
}
Code file location:
animate-it/animate-it/edsanimate.phpAnimate It! [edsanimate_end] Shortcode
The ‘edsanimate_end’ shortcode from the Animate-It plugin ends the animation effect for the enclosed content. It checks the device type and enables animation if the device is a smartphone, tablet, or computer.
Shortcode: [edsanimate_end]
Examples and Usage
Basic example – This shortcode ends the animation block. It does not require any parameters or attributes.
[edsanimate_end /]PHP Function Code
In case you have difficulties debugging what causing issues with [edsanimate_end] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('edsanimate_end', array( $this, 'edsanimate_end_handler' ) );Shortcode PHP function:
function edsanimate_end_handler( $attributes, $content = null ) {
$device_type = $this->detect_device();
$enable_smart_phone = get_option('eds_enable_on_phone');
$enable_tablet = get_option('eds_enable_on_tab');
$enable= ($device_type=='phone' && intval($enable_smart_phone))
|| ($device_type =='tablet' && intval($enable_tablet))
|| ($device_type =='computer');
if( !$enable ) {
return '';
}
return '</div>';
}
Code file location:
animate-it/animate-it/edsanimate.phpAnimate It! [edsanimate] Shortcode
The ‘edsanimate’ shortcode from Animate-It plugin adds animation effects to your content. It detects the device type and enables animations based on the settings for smartphones, tablets, or computers. The shortcode attributes include ‘animation’, ‘delay’, ‘duration’, ‘infinite_animation’, ‘animate_on’, and ‘scroll_offset’. These attributes allow you to customize the animation style, timing, and trigger. For instance, the ‘animation’ attribute specifies the animation type, while ‘delay’ and ‘duration’ control the timing. The ‘infinite_animation’ attribute allows the animation to repeat indefinitely. The ‘animate_on’ attribute sets the trigger for the animation (scroll, click, or hover), and ‘scroll_offset’ defines the scroll position at which the animation starts. If no animation is specified, the content is returned without any effects. If the device type doesn’t match the settings, the content is also returned without animation.
Shortcode: [edsanimate]
Parameters
Here is a list of all possible edsanimate shortcode parameters and attributes:
animation– specifies the type of animation to be applieddelay– sets the delay time before the animation startsduration– determines how long the animation will lastinfinite_animation– if set to ‘yes’, animation will loop indefinitelyanimate_on– triggers the animation on ‘scroll’, ‘click’ or ‘hover’scroll_offset– sets the distance in pixels from the top of the page at which the animation triggers
Examples and Usage
Basic example – Animate a text with the default settings of the plugin.
[edsanimate]Your Text[/edsanimate]Advanced examples
Animating a text with a specific animation, delay and duration. This example uses the ‘bounce’ animation, with a delay of 2 seconds and a duration of 4 seconds.
[edsanimate animation="bounce" delay="2" duration="4"]Your Text[/edsanimate]Animating a text infinitely on scroll. This example uses the ‘shake’ animation, with an infinite loop and the animation triggers on scroll.
[edsanimate animation="shake" infinite_animation="yes" animate_on="scroll"]Your Text[/edsanimate]Animating a text on hover with a scroll offset. This example uses the ‘tada’ animation, triggers on hover and has a scroll offset of 50.
[edsanimate animation="tada" animate_on="hover" scroll_offset="50"]Your Text[/edsanimate]PHP Function Code
In case you have difficulties debugging what causing issues with [edsanimate] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('edsanimate', array( $this, 'edsanimate_handler' ) );Shortcode PHP function:
function edsanimate_handler( $attributes, $content = null ) {
$device_type = $this->detect_device();
$enable_smart_phone = get_option('eds_enable_on_phone');
$enable_tablet = get_option('eds_enable_on_tab');
$enable= ($device_type=='phone' && intval($enable_smart_phone))
|| ($device_type =='tablet' && intval($enable_tablet))
|| ($device_type =='computer');
if($enable):
extract( shortcode_atts( array(
'animation' => '',
'delay' => '',
'duration' => '',
'infinite_animation' =>'',
'animate_on' => '',
'scroll_offset' => ''
), $attributes ) );
$classString = "animated";
$animation = sanitize_text_field( $animation );
if($animation == '')
{
return do_shortcode($content);
}
$classString .= " " . $animation;
if(strcasecmp($infinite_animation, 'yes')==0) {
$classString .= " infinite";
}
if( $delay != '' ) {
$delay = intval( sanitize_text_field( $delay ) );
$classString .= " delay" . $delay;
}
if( $duration != '' ) {
$duration = intval( sanitize_text_field( $duration ) );
$classString .= " duration" . $duration;
} else {
$classString .= " duration2";
}
if(strcasecmp($animate_on, 'scroll')==0) {
$classString .= " eds-on-scroll";
} else if(strcasecmp($animate_on, 'click')==0) {
$classString .= " eds-on-click";
} else if(strcasecmp($animate_on, 'hover')==0) {
$classString .= " eds-on-hover";
}
if(isset($scroll_offset) && $scroll_offset!=''){
return '<div class="'. esc_attr($classString) .'" eds_scroll_offset="'. esc_attr(sanitize_text_field( $scroll_offset )) .'">'.do_shortcode($content).'</div>';
}else {
return '<div class="'. esc_attr($classString) .'">'.do_shortcode($content).'</div>';
}
else:
return do_shortcode($content);
endif;
}
Code file location:
animate-it/animate-it/edsanimate.phpConclusion
Now that you’ve learned how to embed the Animate It! Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply