[FIXED] How to use interactions for entrance animations that don't show the element on page-load

Hi there Bricks community,

Loving the interactions feature and what it is teaching me. However, I seem to be stumped on an animation problem I have (not a bug).

I’m wondering if anyone can point me in the direction of how to create an entrance animation that only shows the element after the animation is complete. The animation is triggered when the viewport loads, but the text pops in and then starts the animation a split-second later.

Thanks in advance for any suggestions. Have a wonderful day further.

Matt :smiley:

1 Like

I experienced the same issue and used the CSS below to resolve the issue.

[data-interactions] {
  visibility: hidden;
}
[data-interactions].brx-animated {
  visibility: visible;
}
3 Likes

Hi there ZestJosh,

Thank you so much for the swift fix! :handshake: :raised_hands: I don’t have much experience using attributes, so I’ll take a look at how this works specifically. But it definitely worked on my end.

Truly appreciate the response. :smile:

After some further testing, this works great for CSS animations but not so great for other interactions like the Click trigger (it hides the element).

I suspect some additional modifications need to be made by the Bricks team to make this work as expected so we don’t need to add the CSS.

Paging @timmse

Hey guys,
We’re working on it: WIP: Interactions animations flicker / lagging

1 Like

Thanks for the code Zestjosh, works great on front end.

There is a problem though;
once I add the code to my customizer, nestable tabs aren’t showing in the backend.
If I remove it, they show up again.