Skip to content

ramiroaisen/svelte-layout-aware-transitions

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Svelte Layout Aware Transitions DEMO

Install

npm i svelte-layout-aware-transitions

Use

<script>
  import {
    slideLeft,
    flyLeft,

    slideRight,
    flyRight,

    slideDown,
    flyDown,

    slideUp,
    flyUp
  } from "svelte-layout-aware-transitions";
</script>

<div transition:slideLeft={opts}></div>

Why?

Transform based transitions are great, they're GPU accelerated and all. But sometimes you need to incorporate an element to a layout with a transition that affects also the other elements in the layout. Sometimes you can achieve this using animate but sometimes not (I think)

Notes

These transitions make use of negative margins, and sets the display to relative and the z-index to -1 during the transition

Fly transitions are equal to slide but adding the fade effect.

All transitions accepts the same params with the same defaults:

  duration: 400
  delay: 0
  easing: cubicOut // (see svelte/easing)

TODO

Add more transitions

Change the name to a better (shorter) one

About

Svelte transitions that affects the layout

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published