svelte logo

Want a Svelte site built?

Hire a Svelte developer

@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

πŸ‘¨πŸ»β€πŸ’» in progress...

πŸ“ todo...

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

MIT © Valexr

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer

Get New Themes & Resources

Loading Svelte Themes