NO BUG: Animations have a bug, they execute themselves without taking into account the styles

Bugs
1

When I add custom CSS to an element or set effects in the Transform tab, the animations defined in “Interactions” perform in such a way that they drop the mentioned styles and additional effects, perform the animation, and back those styles show.

This looks very terrible, because the element changes appearance at the beginning of the animation and animates in a simplified version, and then again returns to the original form resulting from the custom styles and Transform settings.

2

I already know what the problem stems from.

Animations are based on adding and removing (using JS) a style with an effect to an element. For example, the Pulse animation adds the brx-animate-pulse style, which uses a code snippet like this:


@keyframes pulse {
    0% {
        transform: scaleX(5)
    }

    50% {
        transform: scale3d(1.05,1.05,1.05)
    }

    to {
        transform: scaleX(1)
    }
}

This style overwrites the existing CSS property “transform” causing the previous settings (those from Transform settings or custom CSS) to be lost!
Once the animation is complete, the animation style is removed and the originally set one takes effect, sometimes causing bizarre behavior like flashing, jumping or crazy rotation of the element.

For this to work well JS from Bricks should extend (not overwrite) the original “transform” property by adding more effects and ultimately creating a chain of them, here a random example illustrating the principle:

transform: translate(-100%, -100%) scale(0.5) skew(30deg, 20deg);

Details here:

3

Hi Jacek,
Thanks so much for your report!

What you expect cannot work at all. The interaction animations are based on a CSS keyframe animation (animate.css) and animate certain properties, such as transform. They use fixed, predefined values to make the animation look the way it should.

If your element is already transformed, this does not change the keyframe animation. This means that you would have to create your own animations that include all the properties that have already been set, such as transform, instead of the default animations, which of course use completely different values.

Best regards,
timmse

4

@timmse

I extended your animation like this:

@keyframes pulse {
    0% {
        transform: scaleX(1) var(--v)
    }

    50% {
        transform: scale3d(1.05,1.05,1.05) var(--v)
    }

    to {
        transform: scaleX(1) var(--v)
    }
}

and in my element, in custom CSS I defined the --v variable:

:root {
  --v: skewX(15deg) skewY(30deg);
}

root {
  transform: var(--v);
}

Guess what happened? :slight_smile: Yes, it worked.

This is just the first idea, but don’t write that it’s impossible, it’s simply a matter of implementation.

5

I did not say that it is impossible. That’s why I advised you to create your own animation with which it works. I just said that it can’t work out of the box as you think.

6

Ok, sorry, I misunderstood.

But if you would add these additional variables to your style definitions as I gave in the example:

@keyframes pulse {
    0% {
        transform: scaleX(1) var(--pulse-additional-transforms)
    }

    50% {
        transform: scale3d(1.05,1.05,1.05) var(--pulse-additional-transforms)
    }

    to {
        transform: scaleX(1) var(--pulse-additional-transforms)
    }
}

…it would be possible to use them without writing your own animations definitions, and at the same time if I didn’t define the appropriate variable your animation would work as before.

It is win-win solution imho.