Yabe Bricks Plain Classes Compatibility

To use Yabe Open Source – Bricks Plain Classes and have the Fancy Bricks classes appear in the search engine, you must add the following PHP code in functions.php or in your favorite snippets plugin


add_action('wp_enqueue_scripts', static function () {
    if (!function_exists('bricks_is_builder_main') || !bricks_is_builder_main()) {

    if (!defined('FANCY_ANIMATIONS')) {

    $selectors = file_get_contents(dirname(FANCY_ANIMATIONS::FILE) . '/build/builder-selectors.json');
    $selectors = json_decode($selectors, true, 512, JSON_THROW_ON_ERROR)['classes'];

    $classes = json_encode($selectors);

    wp_add_inline_script('yos-brx-plain-classes', <<<JS
        document.addEventListener('DOMContentLoaded', function () {
            wp.hooks.addFilter('yos-brx-plain-classes-autocomplete-items', 'yos_brx_plain_classes_fancy_animations', function (items) {
                return [...items, ...Object.values({$classes}).map((value) => ({ value: value }))];
    JS, 'after');
}, 1_000_002);

If you add new animations to the page, after saving it takes 2 seconds to generate the CSS.

If you are using ACSS make sure you have version 2.7 or higher for best compatibility.

.fb-anim--fade-in combines very well with all animations.

Activate and deactivate the A/F button in the editor to restart the animation.

Animations do not work with position fixed elements.