Custom drawer component

Ask us anything
1

I suspect it requires a custom component - but I figured I would check with community first.

Curious if there is a no-code or low code approach to creating “drawer” behavior in WeWeb - for example - create a modal 600px wide by 400px high - and have a drawer open from that modal (from right or left or top or bottom) and close. Basically - WeWeb has this in Popup Sidebar - but that appears pretty limited in parameters and no way (at least that I could figure out) to make that sidebar come out of a modal or container.

Seems like it would be a massively useful custom component -

2

You can build this yourself with the Modal element, use two divs and hide one until you click on a button

3

Away from my computer at the moment - is it possible to animate the open/show (slide in/out)?

4

Yes, you can use a transform translate for this

5

I was messing around with the animation beta and did something kinda cool - curious if there is a method to have MORE THAN ONE animation available on an element? Two different animations with two different triggers for example?

6

The transforms don’t seem to work for me, if I have like items stacked one under another, it seems, like it keeps the height of the element even if scale is like 0.

Screenshot 2023-12-07 at 18.07.34
Screenshot 2023-12-07 at 18.07.341526×2054 109 KB

7

Yeah - I could not figure it out with transforms - I DID manage it with animation beta - and I love the control I have there - but I would need TWO different animations on same element (open drawer, close drawer) - unless I manage to figure out how you bind variables as key frames which I suspect is possible. I don’t think there are any videos and documentation yet on animation stuff @Joyce ??

8

What you mean by animations beta? What does your animation look like to open?

9

(set the Z depth of the green container to be behind the other)

FYI - as far as I know the “animation beta” is not released in the wild - you have to ask the WeWeb peeps for access.

UPDATE: If use a variable that toggles between values of “running” and “paused” bound to PLAY STATE in the animation beta and set ITERATIONS to infinite - then it cycles through opening and closing and I can pause it manually at any time by changing the variable - but I need a way to toggle the play state to “paused” after 1 iteration is played … @raydeck or @Joyce any thoughts??

10

Okay - @Broberto got me all sorted how to do this the correct way.

In the default state I set width of the drawer to “0px”

I created a new state (drawer_open) and bound it to the boolean variable set by the open/close buttons - and set width to my drawers full width (200px)

Then I added a transition set to width with desired speed and also added that to the default state as well.

11

Indeed there isn’t. We’re planning on adding presets to make the feature (still in closed beta) much easier to use. We’ll work on user docs then :slight_smile:

Unfortunately I can’t help in the meantime, I’m very bad at animations :sweat_smile: