Skip to content

Instantly share code, notes, and snippets.

@doppelganger9
Created May 28, 2019 17:22
Show Gist options
  • Save doppelganger9/d59ecf1f6442c76efdffe39fd92fb8e2 to your computer and use it in GitHub Desktop.
Save doppelganger9/d59ecf1f6442c76efdffe39fd92fb8e2 to your computer and use it in GitHub Desktop.
Sliding Svelte Menu with animation
<script>
import { writable } from 'svelte/store';
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
const menuOpened = writable(false);
const menuLeft = tweened(-30, {
duration: 200,
easing: cubicOut,
});
const mainLeft = tweened(0, {
duration: 200,
easing: cubicOut,
});
const openMenu = () => {
menuLeft.set(0);
mainLeft.set(20);// not 30 to give a parallax kind of effect
menuOpened.set(true);
};
const closeMenu = () => {
menuLeft.set(-30);
mainLeft.set(0);
menuOpened.set(false);
};
</script>
<style>
* {
box-sizing: border-box;
color: #555;
}
div.menu {
background: #ff7000;
width: 30vw;
height: 100vh;
position: absolute;
top:0;
left:-30vw;
padding: 5vh 5vw;
z-index: 1;
}
div.main {
background: rgba(120,0,100,.3);
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
padding: 5vh 15vw;
}
</style>
<div class='main' style="left: {$mainLeft}vw;">
<h1>
Main panel
</h1>
<p>
This is a sample of Svelte app with an animated side menu.
</p>
{#if !$menuOpened}
<button on:click={() => openMenu()}>
Open Menu
</button>
{/if}
</div>
<div class='menu' style="left: {$menuLeft}vw;">
<h2>
Menu
</h2>
<p>
Here are the menu contents. Kind of empty at the moment.
</p>
{#if $menuOpened}
<button on:click={() => closeMenu()}>
Close Menu
</button>
{/if}
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment