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

1 Like
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

1 Like
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.

1 Like
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:

1 Like