Small footprint JS library for

Vâlve are Romanian female spirits and shapeshifters.

Vâlvă is a small footprint JS library dedicated to transitions.
When a full-fledge framework is overkill, but relying solely on CSS is not an option.

Now v.1.1!

Quick and dirty demo available in docs/ or as a Github Page

<script src="path/to/assets/Valva.min.js"></script> Node

npm install @i-is-as-i-does/valva

import Valva from '@i-is-as-i-does/valva'; Important

Beware of adjacent elements with margin and/or padding. Vâlvă does not modify those.
If you're experiencing some unexpected jumps, try to wrap your animated element into a neutral, no-margin no-padding parent element.

Valva
dist/Valva.js | dist/Valva.min.js

ValvaAs
contains aliases and support for Valva v.1.0
dist/ValvaAs.js | dist/ValvaAs.min.js

Vue 3 component in src/vue

* = required
type = ease, fade or ease (aka slide+fade)

// Fade-in, slide-down or ease-in, depending on {type} vShow(elm*, type, duration, callback, timing) // Fade-out, slide-up or ease-out, depending on {type} vHide(elm*, type, duration, callback, timing) // Fade-toggle, slide-toggle or ease-toggle, depending on {type} vToggle(elm*, type, duration, callback, timing) // Toggle visibility, wait for {delay}, toggle back vTempToggle(elm*, type, delay, duration, callback, timing) // Toggle visibility, resolve {callback}, toggle back vToggleResolve(elm*, callback, type, duration1, duration2, timing, reverse) // Smooth append element to DOM vPlace(parent*, child*, prepend, type, duration, callback,timing) // Smooth replace element in DOM vReplace(oldElm*, newElm*, duration, callback, timing) // Will `fade` if {elm} height = {prevHeight}, `ease` otherwise vShowAdapt(elm*, prevHeight*, duration, callback, timing) // Mesmerizing airport letter board effect vSplitFlap(elm*, text*, speed) Defaults

type: 'ease' // aka slide+fade duration: 300 // in ms callback: null // function to execute once transition is done timing: 'ease-in-out' // CSS timing function delay: 1000 // vTempToggle reverse: false // vToggleResolve prepend: false // vPlace speed: 20 // vSplitFlap ease: true // insertDiversion & diversionToggle Aliases

Available in ValvaAs
Mainly for Valva v1.0 support

slideUp(elm*, duration, callback, timing) slideDown(elm*, duration, callback, timing) slideToggle(elm*, duration, callback, timing) timedSlideToggle(elm*, duration, delay, callback, timing) Fade in/out

fadeOut(elm*, callback, duration, timing) fadeIn(elm*, callback, duration, timing) fadeToggle(elm*, callback, duration, timing) timedFadeToggle(elm*, delay, callback, duration, timing) Ease in/out

easeOut(elm*, duration, callback, timing) easeIn(elm*, duration, callback, timing) easeToggle(elm*, duration, callback, timing) timedEaseToggle(elm*, delay, duration, callback, timing) Text split flap

splitFlap(elm*, text*, speed = 20) Diversions

aka DOM modification helpers

diversionToggle(elm*, callback, ease, duration, reverse, timing) insertDiversion(parent*, child*, prepend, ease, duration, callback, timing) replaceDiversion(oldElm*, newElm*, callback, duration, timing) Contributing

Sure! You can take a loot at CONTRIBUTING.

This project is under the MIT License; cf. LICENSE for details.

John Everett Millais, The Apparition, 1895