@Slidy

Simple, configurable, nested & reusable sliding action script with templates, animations, easings & plugins.

Сompletely mimics the behavior of a native scroll with mouse drag, index navigation, acceleration, gravity & infinite loop mode.

<script>
    import { slidy } from '@slidy/core'
    import { flip } from '@slidy/animation'

    slidy(node, { snap: 'deck', animation: flip })
</script>

<div id="node">
    <img />
    ...
</div>

Try the DEMO

Packages

@slidy/core - Core sliding script
@slidy/media - Observable media
@slidy/easing - Easing functions
@slidy/animation - Animation functions
@slidy/plugins - Plugins functions
@slidy/element - CustomElement
@slidy/svelte - SvelteJS template
@slidy/solid - SolidJS template
@slidy/react - ReactJS template

👨🏻‍💻 in progress...

Demo docs site based on SvelteKit

📝 todo...

@slidy/vue - VueJS template
@slidy/malina - MalinaJS template

NPM organization @slidy

Development

esbuild - bundling & packaging
pnpm workspaces - monorepo
tsc - types declaration
derver - dev server

Thanks 🎉

@ariya for kinetic - examples & explanations of scroll kinetic principles
@argyleink for open-props - Open Source CSS Variables
@evanw for esbuild - an extremely fast JS bundler
Unsplash for light dataset - Unsplash images made available for research and machine learning by this terms
@AlexxNB for derver - simple but powerfull dev/prod nodejs server
@PaulMaly for idea of simplifing reactive updates of options object
@rodshtein for the idea of implementing the action function
@EricRovell for collaboration, ideas of modulating @Slidy & SvelteJS root template
@ArtemiySchukin for collaboration & SolidJS & RactJS implementations

Valexr / Slidy

readme