Hi all, i want to add my custom animations to the interaction, followed the instructions and did not work, I’m 100% sure it has to do with where I have to place the PHP code, I and, the CSS styles animations added to toe custom code into bricks custom code CSS, and the PHP is the one I’m having trouble where it needs to be added, I try the functions.php inside the child theme, then I try creating a directory in child theme like this setup/control_options.php no work, can someone tell me where I have to add the PHP code in order to work is not showing in the dropdown of animation like it show in this link.
can some one help me to figure out where this PHP code goes thank you
Did you find a solution?
I just added the function in a them function inside the main theme but nothing
I don’t see the custom animation in the bricks list.
Can you post the code you’re using?
And are you sure if it was placed in functions.php of your child theme? That is the correct location if so.
here
this is how it works
add this to your child theme fucntions.php or snippet plugin whatever you like
add_filter( 'bricks/setup/control_options', function( $options ) {
// Add custom animation called Flash and Fade
$options['animationTypes']['flashFadeIn'] = esc_html__( 'Flash and Fade In', 'bricks' );
return $options;
}, 10 );
function enqueue_custom_animations() {
// Register a handle for the CSS or JS to attach the inline
wp_register_style( 'custom-animation-style', false );
// The CSS we want to load globally
$custom_css = '
.brx-animate-flashFadeIn {
animation-name: flash-fade-in;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
@keyframes flash-fade-in {
0%, 100% { opacity: 0; }
10%, 30% { opacity: 1; }
40%, 50% { opacity: 0; }
60%, 80% { opacity: 1; }
90% { opacity: 0.5; }
100% { opacity: 1; }
}
<script>
</script>
';
// Add the inline CSS
wp_add_inline_style( 'custom-animation-style', $custom_css );
// Enqueue the registered style handle so it loads
wp_enqueue_style( 'custom-animation-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_animations' );
2 Likes
Use “Code Snippets” plugins to do that. It will not added the php code directly in functions.php file but it will work like a charm.
Firstable im very sorry for a late respose, i want to thank you for the help, THANK YOU THANK YOU SO MUCH. yes the works correct, thank you very much, i added the code into the functions file in the child theme, im wondering why u added the empty, just a question im still learning php, plus one question, how do i add more than one animation, i know, im sorry for asking that… im sharing and image and see if thats what im understanding… one image is proof that your code does work
hope this second image makes sense, i just want to make sure i undestand i do understand the css part but not much of the php some i do.
SOLVED Custom Animation Works
