https://github.com/negrel/svelte-moving-div

A moving component for svelte js.
https://github.com/negrel/svelte-moving-div

component html js svelte svelte-v3 svelte3 sveltejs

Last synced: 3 months ago
JSON representation

A moving component for svelte js.

• Host: GitHub
• URL: https://github.com/negrel/svelte-moving-div
• Owner: negrel
• License: mit
• Created: 2020-01-08T21:47:33.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-09-04T21:50:04.000Z (over 4 years ago)
• Last Synced: 2025-01-08T09:14:00.229Z (5 months ago)
• Topics: component, html, js, svelte, svelte-v3, svelte3, sveltejs
• Language: JavaScript
• Size: 3.67 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![package size](https://img.shields.io/github/size/nergel3/svelte-moving-div/src/index.svelte)

![npm version](https://img.shields.io/npm/v/svelte-moving-div?color=green)

# Svelte-moving-div

> A moving component for svelte js

### REPL Example

Check the basic [REPL example](https://svelte.dev/repl/73274fbd734d4164ab7fd281b84f5644?version=3.17.2).

![gif example](https://raw.githubusercontent.com/Nergel3/svelte-moving-div/master/resources/example.gif)

### Installation

```

npm install svelte-moving-div

```

### Getting started

```svelte

	// Example of svelte-moving-div component.

	// After 'npm install svelte-moving-div' you can use it :

	import MovingDiv from 'svelte-moving-div';

	
Hello World !


	/* Bigger margin */

	:global(.moving-div) {

		padding: 2rem 5rem

	}

	

	/* Custom transition speed */

	:global(.moving-div > .inner-div) {

		transition: transform .25s!important

	}

```

### :stars: Show Your Support

Please give a :star: if this project helped you!

#### :scroll: License

MIT © Alexandre Negrel