SOLVED: Applying Animation removes other transforms?

Bugs
1

Bricks Version: 1.4.0.2
Browser: Firefox
OS: Windows

Steps to reproduce:

  1. Give an element any ‘Transform’ like rotate some degrees, or scale or translate.
  2. Apply an animation like SlideInRight
  3. Save and check preview on front-end, the transform would be gone.

To confirm, un-tick the ‘animation-name’ property in browser inspect tool and the transformation would be applied correctly on the element.

1 Like
2

I also noticed the same for quite some time. Not sure if it’s normal or a bug. In my case, I set transform for the hover state.

Currently, my workaround is to apply the transform effect(on hover) on the child item, and then the slide effect on the parent item.

1 Like
3

This isn’t a bug. It’s how CSS works (as animations use transforms)

Covered in Bricksextras Docs :

The parallax movement is controlled with transforms. If you’re needing to add your own transforms to an element, like a rotate make sure to do this to either a container element or an inner element, not to the actual element that you’re adding the parallax effect to. This will avoid conflicts where two transforms are trying to be applied at the same time.

1 Like
4

I tried that after the initial fail, but the vertical-rl mode needed more width and height related css so I dropped the idea at the moment.

I wish the library that Bricks uses for animations incorporates the existing transforms, of the other properties than which is being transformed, and kept them stationary throughout. But I am asking for too much. I mean that is what we would have done anyway in the stylesheet file. I could add a new animation rule in custom CSS but that would require opening the inspect tool and finding the animation name, which in-turn would remove the other effects. agh

@jornes we have to apply it on the container. I thought the library pulled the existing transforms. Thanks @Deanphillips for the resource.

1 Like