Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Jan 24

Tutorial: Sliding Out Menu

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 = wixAnimations.timeline();
$w.onReady(function () {
 let open = false;
    $w('#navOpen').onClick(() => {
 if (open == false) {
            wixWindow.getBoundingRect()
                .then((windowSizeInfo) => {
 let windowWidth = windowSizeInfo.window.width;
                    navTimeline.add($w('#nav'), { x: -(windowWidth * 0.95), duration: 300, easing: 'easeInOutCubic' }).play();
                    open = true;
                });
        } else {
            navTimeline.reverse();
            open = false;
        }
    })
});

2 comments
Jan 25Edited: Jan 25

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

5d ago

@Jonathan Tsodikovitch 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.

Editor X

Design your boldest creations.