Override default Bricks animation values

How To
1

Hi there,
how to override default css animation (animate.css) with a custom value and in the same time being able to set them in the editor?

For example: fadeInUp has translate3d(0,100%,0) and I’d like translate3d(0,30px,0) for a more suble effect.

I’ve tried placing the whole fadeinup animation targeting .brx-animated-fadeInUp but without effort.

Many thanks!

3 Likes
2

I just had to find a way to override all the “fadeIn” animations from 100% to 30px because 100% was too aggressive. Initially I tried to create the same keyframe animations in a the bricks child theme style.css file with the “!important” prop but that didn’t work. Instead I had to modify the animate.min.css file in the Bricks parent theme.

Apply this with caution because you’ll be modifying the parent theme file.

Bricks animate.min.css
Bricks animate.min.css1920×1130 359 KB

I copied and pasted the animate.min.css file into VScode, searched and replaced “100%” with “30px” and then pasted that code back into the WP Theme File Editor. That eased up all the FadeIn animations across my site. I haven’t tested to see if a Bricks update would replace the default animate.min.css file but you would have to follow these steps again if it does.

Hope this helps!

2 Likes
3

I got the same Problem. I want to set my custom translate3D settings because the original setting is too harsh.

1 Like
4

Why does not the child theme CSS work in this case?

5

Do not override. Try to create your own interaction.

2 Likes
6

Thank you! This is perfect solution.

7

Any way to remove the default animation styles?
… now that I have my own… ?

8

This should work – PHP gurus please let me know if there’s a problem with this…

add_filter( 'bricks/setup/control_options', function( $options ) {
    // Remove all default animationType options
    $options['animationTypes'] = array();
    // Add custom animation into animationTypes
    $options['animationTypes']['AnimBackInDown'] = esc_html__( 'AnimBackInDown', 'bricks' );
    $options['animationTypes']['AnimBackInLeft'] = esc_html__( 'AnimBackInLeft', 'bricks' );
    $options['animationTypes']['AnimBackInRight'] = esc_html__( 'AnimBackInRight', 'bricks' );
    $options['animationTypes']['AnimBackInUp'] = esc_html__( 'AnimBackInUp', 'bricks' );
    $options['animationTypes']['AnimBounceIn'] = esc_html__( 'AnimBounceIn', 'bricks' );
    $options['animationTypes']['AnimFadeIn'] = esc_html__( 'AnimFadeIn', 'bricks' );
    $options['animationTypes']['AnimFadeInDown'] = esc_html__( 'AnimFadeInDown', 'bricks' );
    $options['animationTypes']['AnimFadeInLeft'] = esc_html__( 'AnimFadeInLeft', 'bricks' );
    $options['animationTypes']['AnimFadeInRight'] = esc_html__( 'AnimFadeInRight', 'bricks' );
    $options['animationTypes']['AnimFadeInUp'] = esc_html__( 'AnimFadeInUp', 'bricks' );
    $options['animationTypes']['AnimFlipInX'] = esc_html__( 'AnimFlipInX', 'bricks' );
    $options['animationTypes']['AnimZoomIn'] = esc_html__( 'AnimZoomIn', 'bricks' );
    return $options;
}, 10 );
1 Like