NO BUG: Custom Animations not working as expected

Browser: Chrome 110
OS: Windows 124.0.6367.61 (Official Build) (64-bit)

Hey guys, playing with adding custom animation names.

Using these instructions How to add a custom animation in interaction – Bricks Academy

The custom animation names just don’t work properly. I can add them to elements but the JS to add and remove the animations classes just doesn’t work.

See this video: Bricks buggy custom animations.mp4

Hi Alan,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue.
What are your custom animation styles, and where are they located?

Best regards,
timmse

Hey Timsie,

The styles are in a Bricks Class. The PHO is in the child theme functions.php

I’m happy to provide a login if you like. This is just a blueprint site.

I just sent you a login to help@bricksbuilder.io

Hi Alan,
The problem is not the interaction itself but the CSS approach you are using.

CSS counters cannot be used within calc (apparently still not): Different Approaches for Creating a Staggered Animation | CSS-Tricks - CSS-Tricks

However, the article shows various other potential options, such as nth-child.

OK, regardless of the CSS. I hadn’t even gotten to a point of testing that. Why is the Bricks interactions not adding and removing the class from the element?

Even if the CSS is not going to work, that should stop Bricks from adding the class to the element??

Hmmm… I just simplified the CSS and the class now appears to get applied correctly.

I really don’t understand how this affects Bricks logic to add/remove the class to the element.

Anyhow, thanks, at least I know now what to look for.