SOLVED: Animations ID only + animation duration options

Slowly starting to rebuild first pages. And now first “problem” showing up:

  1. Animations can only be assigned to an ID instead of a class.
  2. Animations have only 5 options for speed instead of just an option to enter a time.

Would love to get this “fixed” or better say expanded, so we could easily assign entry animations per class and do some nice animations with longer time than defined in those 5 options.

22 Likes

It’s because the animations are being added to the element itself, not the ID. The animation setting actually adds classes/attributes to that element to create the animation.

It can’t be added to a class as classes are for adding styles only, ie trying to add an animation to a class doesn’t work because you’re trying to add classes to a class.

2 Likes

ok that’s very bad and limiting. in oxygen this was easily handled that way.

and i didn’t know that an animation is not a style.

1 Like

I am fully supporting @grafikundso’s request. It’s a major scalability issue if you have - say 100 animated locations - and your client wants to change the animation-style.

In Oxygen this was extremely easy to solve. Just change animation class settings => done.

This seems to be a HUGE HUGE issue in Bricks. I do not really like to go back and change 100 animation settings manually in Bricks. And I think I am not the only one :frowning:

Oxygen showed that this is doable, no matter how they did it technically … but it worked.

I really hope Bricks team is changing this behavior in the future. Otherwise native Bricks animations can’t be used at all on mid-sized or larger websites!

@timmse Could you please check and rethink this. I do not really want to install motion.page or use manual animation libraries or css-animation libraries just for a few basic animations. For pro-sites animations NEED to work on class level from my point of view!

10 Likes

My opinion is the same as what’s been said, that for larger or mid-sized sites, this is a significant scalability issue.
Bricks TEAM - It would be great if you could add this to your list of priorities.

4 Likes

Yeah it makes perfect sense that animations should be attached to classes.

2 Likes

+1 Please fix this… huge scalability problem

2 Likes

+1. I’m facing this issue now. Having to change animation styles for 100’s of elements.

2 Likes

so no official answer. ok.

Also, the animate effect could not be pasted when we copy the element that has the animate effect. I have to apply it manually, which is a pain.

1 Like

+1 This should be addressed ASAP. It’s a major headache to appply – and change – animations on an ID level.

1 Like

Hey guys,
Bricks 1.6 (Beta 2) contains the possibility to add animations to global classes (via interactions).

You can download it manually in your account:
https://bricksbuilder.io/account/?v=1.6-beta2

Best regards,
timmse

1 Like

Thank you @timmse

@grafikundso

I think this is the one you’ve waited for?

1 Like

unexpected news! nice, very nice! thanks!

1 Like

If you want an easy solution for creating animations with just an animation ID and duration specification, programming languages like JavaScript may be worth looking into - here is an example using HTML/CSS with JavaScript:

Copy Code for Simple Animation Within our example we create a CSS animation using @keyframes called myAnimation that moves an element’s left property from 0 to 200 pixels over two seconds (you can adjust this time period as desired).

In HTML, we create an element with the class animated-element and ID animationID to be animated. This element will become animated.

In JavaScript, we select an element by its ID (animationID) and set its animationName property to “myAnimation”, to animate. Optionally, we can extend or reduce its duration using animationElement.style.animationDuration.

This is just a basic example; as desired, more sophisticated animations, multiple elements, and user interactions may be added for further expansion.