CSS Help multiple classes

Need some help on implementing this https://davidwalsh.name/css-slide

I’m using @julienallard1 brilliant classify as usual. But it’s the first time I’m dabbling with multiple classes.

My idea was to give the group a class “slider.closed” and then change the class to “slider” when I click a button… but that of course doesn’t work haha.

In David Walsh’s tutorial the CSS .slider.closed means an element with class “slider” and class “closed” . Not "an element with class “slider.closed”. Just to make things clear…

You can use the condition tab to add or remove class. So you could set a yes/no custom state on your element and have a condition where the ID Attribute field is {addClass: "closed"} when the state is no and the normal (not conditional) ID Attribute would be {addClass: "slider", removeClass: "closed"}.

Ah of course, that makes a lot more sense. Thank you @julienallard1
Unfortunately, this expands the group downwards, I’m thinking this has to do with the way
Bubble renders groups?

Isn’t it what also happens on the tutorial demo?

You’re right of course haha. I read it as a white square animating for some reason. This is why I shouldn’t be bubbling late at night :wink:

What I really wanted was to use the transform property to slide an element in from the side. Which I can easily do with CSS. Basically, I’m trying to make a slide in menu type of thing, with dynamic width. But I can’t seem to come up with a working solution here.

Edit: I wish we had transform slide as an animation property in Bubble. The slide bounce does exactly what I want… apart from the stupid bounce. :unamused:

This topic was automatically closed after 70 days. New replies are no longer allowed.