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?
https://davidwalsh.name/demo/css-slide.php

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.