Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shiryel/saos
Svelte Animation on Scroll - A small component to make your CSS animations work on scroll with Svelte
https://github.com/shiryel/saos
animate-on-scroll animation animation-on-scroll svelte svelte3
Last synced: 5 days ago
JSON representation
Svelte Animation on Scroll - A small component to make your CSS animations work on scroll with Svelte
- Host: GitHub
- URL: https://github.com/shiryel/saos
- Owner: shiryel
- License: mit
- Created: 2020-07-12T02:25:47.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-06T17:50:33.000Z (10 months ago)
- Last Synced: 2024-12-13T21:07:39.514Z (12 days ago)
- Topics: animate-on-scroll, animation, animation-on-scroll, svelte, svelte3
- Language: Svelte
- Homepage:
- Size: 485 KB
- Stars: 248
- Watchers: 5
- Forks: 14
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Animation on Scroll
[](https://npmjs.org/package/saos)
[](https://img.shields.io/github/languages/code-size/shiryel/saos)
[](https://twitter.com/shiryel_)
A very small svelte component to animate your elements on scroll
SAoS allows you to animate once or multiple times a element on scroll, you can define the top and bottom "triggers" and the css of the internal divs (not recomended, but can help in some cases), see below the demo, how install and some examples :smile_cat:
In terms of performance, this lib uses the [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) for most of the browsers (shame on you Internet Explorer)
### :zap: [Demo](https://shiryel.github.io/saos/)
---
## How to install
- Npm
```
npm i saos --save-dev
```
- Yarn
```
yarn add -D saos
```
Note: **Sapper only supports libs as DEV dependencies**, if you realy want to use this lib as a normal dependency on Sapper make sure to import like this `import Saos from 'saos/src/Saos.svelte';` or otherwise you will have problems with SSR!
## How to use
Basic usage:
- First import the package on Svelte
```js
import Saos from "saos";
```
- Then define your @keyframes animation as a -global- on svelte
```css
@keyframes -global-from-left {
0% {
transform: rotateX(50deg) translateX(-200vw) skewX(-50deg);
opacity: 1;
}
100% {
transform: rotateX(0deg) translateX(0) skewX(0deg);
opacity: 1;
}
}
```
- Finally add the keyframe name without the -global- and the others animations params
```html
animation: from-left
```
Beyond the animation param, you can use:
- animation_out -> to play a animation when the element is no more "visible" (use the top and bottom to define this), default: "none; opacity: 0"
- once -> if the animation will be played only one time or multiple times, default: false
- top -> the top of the observer, use a positive value to play the animation after top be visible, default: 0
- bottom -> the bottom of the observer, use a positive value to play the animation after bottom be visible, default: 0
- css_observer -> the css of the div that is the observer, not recomended to use, but is here :cat2:, default: ""
- css_animation -> the css of the div that is the animation, not recomended to use, but is here :cat2:, default: ""
### And we have reactive dispatchs too!
You can do something like:
```js
// Create a handler on your script
function handleObserver(x) {
console.info(x.detail.observing);
}
// Use the `update` event on your html that will be dispatched every time that the `observing` update!
...
```
And it will work! Amazing no? take a look at the last card on our [demo](https://shiryel.github.io/saos/)
### [And you can see a bunch of usage here](https://github.com/shiryel/saos/blob/master/demo/src/Animations.svelte)
If you are lazy (like me) to create your own animations, take a look at [animista](https://animista.net/play/)