romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 04:57:59 +00:00
Code Issues Releases Activity

Updated tab bar animation

Browse Source
This commit is contained in:
Romein van Buren 2023-12-23 11:54:10 +01:00
parent 421bde13f5
commit d90d5bcf63
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/tabbar.svelte
View File

@ -1,7 +1,7 @@
<script>
import { createEventDispatcher, onMount } from 'svelte';
import { tweened } from 'svelte/motion';
import { cubicInOut } from 'svelte/easing';
import { cubicOut } from 'svelte/easing';
import Icon from './icon.svelte';
export let tabs = [];
@ -10,8 +10,8 @@
export let compact = true;
const dispatch = createEventDispatcher();
const activeIndicatorLeft = tweened(0, { easing: cubicInOut, duration: 400 });
const activeIndicatorRight = tweened(0, { easing: cubicInOut, duration: 400 });
const activeIndicatorLeft = tweened(0, { easing: cubicOut, duration: 400 });
const activeIndicatorRight = tweened(0, { easing: cubicOut, duration: 400 });
const liElements = {};
let navEl;
@ -38,6 +38,8 @@
});
</script>
<svelte:window on:resize={() => moveActiveIndicator()} />
<nav class="tabs" class:compact bind:this={navEl}>
<ul>
{#each tabs as tab (tab.key)}