svelte-transitioner

Overview

A Svele/SvelteKit plugin that adds new hooks for customizing mount / unmount transitions.

Installation

yarn add svelte-transitioner

Description

• Customize your own transitions with ease using custom hooks
• Compatible with GSAP timelines
• Synchromous transitions, no overlapping between previous Out with the current In transition

Usage

This plugin adds the following hooks:

• onGlobalInit: a hook responsible for executing custom code when mounting any of the child components
• onInit: a hook responsible for executing custom code on the current component
• globalIntro: a hook that can execute the same custom transition when mounting any of the child components
• intro: a hook that can execute a transition when mounting a component
• globalOutro: a hook that can execute the same custom transition when unmounting any of the child components
• outro: a hook that can execute a transition when unmounting a component

for the on*Init hooks, they will be called like the following:

onInit((node) => {
    // node is the current mounted node
})

as for the *intro or *outro callbacks, it can be used in two ways:

intro((node, t) => {
    // node is the current mounted node
    // t is the current transition animation
    // 1000 is the duration of the transition
}, 1000)

// Or you can use a GSAP Timeline callback instead, like the following
intro((node) => {
    const tl = gsap.timeline({
        paused: true
    })

    tl.to(node, {
        duration: 1,
        yPercent: -100,
    })

    return tl
})

One thing to keep in mind, in order for all the above hooks to work, we have to use some wrapper components:

• TransitionLayout: this should be used in the parent components that will contains all the transitioned components.
• Transitioner: this should be wrapped around the components that you want to apply transitions to.

So for example in a SvelteKit project, we can have the following:

/routes/__layout.svelte:

<script>
    import { onGlobalInit, globalIntro, globalOutro, TransitionLayout } from 'svelte-transitioner'

    onGlobalInit((node) => {

    })
    globalIntro((node) => {
        return gsap.timeline({ paused: true })
    })
    globalOutro((node, t) => {

    })
</script>
<TransitionLayout>
    <slot />
</TransitionLayout>

/routes/index.svelte:

<script>
    import { onInit, intro, outro, Transitioner } from 'svelte-transitioner'

    onInit((node) => {

    })
    intro((node) => {
        return gsap.timeline({ paused: true })
    })
    outro((node, t) => {

    })
</script>
<Transitioner>
    index
    <a href="/one">one.svelte</a>
</Transitioner>

/routes/one.svelte:

<script>
    import { onInit, intro, outro, Transitioner } from 'svelte-transitioner'

    onInit((node) => {

    })
    intro((node) => {
        return gsap.timeline({ paused: true })
    })
    outro((node, t) => {

    })
</script>
<Transitioner>
    One
    <a href="/">index.svelte</a>
</Transitioner>

TODO:

• re-work repo examples
• optimise
• add some tests