Global Animation

Beaver Builder
1

Hello!

I want to use the fade-in animation site-wide on every module on every page. Is there a way to do this without manually having to select the animation on every module?

I tried copy and pasting the animation css i found into a p, h1,h2,h3,h4,h5,h6 selector tag. Didnt work, thought i would see if you guys had any ideas?

Thanks for your time!

Siraf

2

BTW, im using digital pro by genesis theme.

3

Hi Monkeyson,

Unfortunately, there is no easy or quick method to do this, that I am aware of. Therefore, you’re going to need to use CSS like so.

.fl-module-X {
    animation: fl-fade-in 1s ease-out;
    -webkit-animation: fl-fade-in 1s ease-out;
    -moz-animation: fl-fade-in 1s ease-out;
}

You will want to replace the X in the code above for each module you want to use this CSS and replace 1s in the code above to your preferred time.

Thanks,
Danny

4

Hey Danny,

Sorry for the late reply. That seemed like a last resort option, I found another fix while browsing through the interwebs!

For those of you that come accross this post, the genesis theme has a jquery fadein script. I just had to add css selectors and it all worked:

$(".fl-module-rich-text, .fl-module-heading, .fl-module-callout, .fl-module- numbers, .fl-module-button").addClass("fadeInUp");

Thanks for the help though Danny. Very much appreciate it!

Siraf

5

Hey Siraf,

Glad you figured it out! And thanks for taking the time to inform us as well as sharing the solution. We really appreciate it! :slight_smile:

Ben