Tutorial: Sliding Out Menu

Show and tell
, ,
1

This video covers the structure of creating a sliding out menu, and explains how to adjust the animation as you desire.
Code snippet is attached below.

Snippet:

import wixAnimations from 'wix-animations';
import wixWindow from 'wix-window';

let navTimeline;
let screenSizeInterval;
$w.onReady(function () {
    let open = false;
    $w('#navOpen').onClick(() => {
        if (open == false) {
            screenSize();
            screenSizeInterval = setInterval(screenSize, 700)
            open = true;
        } else {
            clearInterval(screenSizeInterval);
            navTimeline = wixAnimations.timeline().add($w('#nav'), { x: 0, duration: 300, easing: 'easeInOutCubic' }).play();
            open = false;
        }
    })

    function screenSize() {
        wixWindow.getBoundingRect()
            .then((windowSizeInfo) => {
                let windowWidth = windowSizeInfo.window.width;
                navTimeline = wixAnimations.timeline().add($w('#nav'), { x: -(windowWidth * 0.95), duration: 300, easing: 'easeInOutCubic' }).play();
            });
    }
});
7 Likes
2

Nice one!
wixWindow.getBoundingRect () allow you to get information about the screen.
Here it’s use to get the screen width size in pixels ( windowSizeInfo . window . width) so we know what the distance of entry and exit of the menu screen is.
Here you can learn more about it:
https://www.wix.com/velo/reference/wix-window/getboundingrect

3

@jonathant I tried doing it but it doesnt work for me. When I resize the viewport, the container messes up. https://www.screencast.com/t/ozrAUyAjQ9T What have I done wrong? I tried changing the width of the Nav container to 100% or 100vw and it doesn’t change anything.

4

@jonathant Hi, not sure if you saw my comment above. I would appreciate if you could advise me on how to fix this issue. Thanks.

5

I’m having the same problem. Really trying to rack my brain as to what the problem is. Any resolution yet?

6

@jonathant @liam10

Any work arounds or fixes for this? I really like/want to use this slide out set up but it breaks when you drag the viewport like Liam’s video. It’s set to 100vw so I don’t understand why it would be doing it. Something to do with the negative margin?

7

Sorry I gave up trying this. Seems I could not fix this. @eduardog can you find Jonathan please to help us out!

8

Hey guys, did you find a manage to work around this error? Seems like a really good solution for the menu I am trying to build, depending on whether you got some feedback from the editor x team or someone else found a solution to this error.

9

https://certifiedcode.editorx.io/slide-menu

2880×1646 276 KB

10

Great! One question. How to use ‘pixel’ instead vw/vh (0.95) in code below?

11

Hi everyone, sincere apologies for missing your messages, I haven’t received the notifications from this thread.

@corey @liam10 @jonasmakki Thanks for bringing this error to my attention. I’ve updated the code above with the workaround.

12

You can simply change this part of the code

x:-(windowWidth*0.95)

To the amount of pixels you want. For example:

x:-300
13

@jonathant Thank you very much! Bytheway How can I contact with you. I want to hire you for some Velo project.