WordPress Animation Hooks & Filters: Extend Your Block Animations

WordPress hooks and filters provide powerful ways to extend Block Editor Animations functionality without modifying core plugin files. Whether you need custom animation effects, conditional loading, or theme-specific behaviors, hooks make it possible.

This developer guide explores available hooks and filters in Block Editor Animations, with practical examples for common customization scenarios.

Available Hooks Reference

Action Hooks:

• aosblocks_before_init – Before plugin initialization
• aosblocks_after_init – After plugin initialization
• aosblocks_enqueue_scripts – When scripts enqueue
• aosblocks_settings_saved – After settings save

Filter Hooks:

• aosblocks_animation_effects – Modify available effects
• aosblocks_default_settings – Change default settings
• aosblocks_script_dependencies – Add script dependencies
• aosblocks_localize_data – Modify localized JavaScript data

Adding Custom Animation Effects

add_filter('aosblocks_animation_effects', 'add_custom_animations');
function add_custom_animations($effects) {
    $effects['custom-bounce'] = array(
        'label' => 'Custom Bounce',
        'category' => 'custom',
        'css_class' => 'custom-bounce-effect'
    );
    return $effects;
}

Corresponding CSS:

@keyframes customBounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
}

.custom-bounce-effect {
	animation: customBounce 0.8s ease-in-out;
}

Conditional Script Loading

add_action('aosblocks_enqueue_scripts', 'conditional_animation_loading');
function conditional_animation_loading() {
    // Only load on specific page templates
    if (!is_page_template('template-landing.php')) {
        wp_dequeue_script('aosblocks-frontend');
    }
}

Modifying Default Settings

add_filter('aosblocks_default_settings', 'custom_default_settings');
function custom_default_settings($settings) {
    $settings['default_duration'] = 800;
    $settings['default_delay'] = 100;
    $settings['default_offset'] = 120;
    return $settings;
}

Adding Script Dependencies

add_filter('aosblocks_script_dependencies', 'add_animation_dependencies');
function add_animation_dependencies($deps) {
    $deps[] = 'gsap'; // If using GSAP
    return $deps;
}

Custom Animation Data

add_filter('aosblocks_localize_data', 'add_custom_data');
function add_custom_data($data) {
    $data['customSettings'] = array(
        'enableParallax' => true,
        'mobileBreakpoint' => 768
    );
    return $data;
}

Theme-Specific Customizations

Disable on specific post types, add custom CSS classes, modify animation timing based on user roles, or integrate with custom page builders.

Best Practices

• Never modify plugin files directly
• Use child themes for customizations
• Document your hooks
• Test thoroughly after WordPress updates
• Follow WordPress coding standards

Conclusion

WordPress hooks and filters enable powerful extensions: custom animation effects, conditional loading, modified default settings, theme-specific behaviors, and integration with other plugins.

Block Editor Animations provides robust hook system for developers.

Visit our support page for questions!