shiryel / saos

Svelte Animation on Scroll - A small component to make your CSS animations work on scroll with Svelte

Svelte Animation on Scroll

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 😸

In terms of performance, this lib uses the Intersection Observer for most of the browsers (shame on you Internet Explorer)

⚡ Demo

---

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

import Saos from "saos";

• Then define your @keyframes animation as a -global- on svelte

@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

<Saos animation={"from-left 4s cubic-bezier(0.35, 0.5, 0.65, 0.95) both"}>
  <div><p>animation: from-left</p></div>
</Saos>

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 🐈, default: ""
• css_animation -> the css of the div that is the animation, not recomended to use, but is here 🐈, default: ""

And we have reactive dispatchs too!

You can do something like:

// 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!

<Saos on:update={handleObserver}>...</Saos>

And it will work! Amazing no? take a look at the last card on our demo

And you can see a bunch of usage here

If you are lazy (like me) to create your own animations, take a look at animista

saos's Issues

Warning Message from svelte about compatibility using this library

11:26:06 PM [vite-plugin-svelte] WARNING: The following packages use a svelte resolve configuration in package.json that has conflicting results and is going to cause problems future.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#conflicts-in-svelte-resolve for details.

TypeScript types?

Wondering if anyone has taken the initiative to create types for this package?

I have no problem trying it myself if I am able to adjust the general structure.

Bump svelte?

sveltejs/svelte#3165 (comment)

Currently getting
Uncaught (in promise) TypeError: outros is undefined

Vulnerable version of Axios

The version of Axios that is in the deps tree, is vulnerable. (at least on NPM)

Severity: High

Issues:

Exposure of Sensitive Information to an Unauthorized Actor in follow-redirects - GHSA-pw2r-vq6v-hr8c
Exposure of sensitive information in follow-redirects - GHSA-74fj-2j2h-c42q

Please fix this, as simply upgrading Axios should fix it.

Given that there is not a security policy, I am resorted to open an issue. I would recommend adding one, so maybe consider doing that.

TypeScript adjustments

Just noticed the default export from index.js provides no types.

Instead, Saos.svelte must be imported directly.

I get this warning when using vite 5.0

WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

500 is not a valid SSR component in Sapper

This is a very nice component.
I have setup a page exactly like the demo https://github.com/shiryel/saos/blob/master/demo/src/Animations.svelte
in Sapper and it works nice but I get the following error once in a while

500
is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
Error: is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
at validate_component (/home/web/svelte-sapper-experiments/sapper/dev/server/server.js:291:15)
at /home/web/svelte-sapper-experiments/sapper/dev/server/server.js:2163:48
at Object.$$render (/home/web/svelte-sapper-experiments/sapper/dev/server/server.js:309:22)
at Object.default (/home/web/svelte-sapper-experiments/sapper/dev/server/server.js:2982:86)
at Object.default (/home/web/svelte-sapper-experiments/sapper/dev/server/server.js:2728:84)
at /home/web/svelte-sapper-experiments/sapper/dev/server/server.js:2691:46
at Object.$$render (/home/web/svelte-sapper-experiments/sapper/dev/server/server.js:309:22)
at /home/web/svelte-sapper-experiments/sapper/dev/server/server.js:2727:58
at Object.$$render (/home/web/svelte-sapper-experiments/sapper/dev/server/server.js:309:22)
at /home/web/svelte-sapper-experiments/sapper/dev/server/server.js:2979:40

Also some times when i navigate to another route I still see the contents of this Animation page and I usually need to refresh the page and navigate back and forth before this page runs again.

I have seen sveltejs/sapper#774 that might help.

General advice when using saos?

Hey,

What's the general advice for document layout when using saos? How to work with it when using a Layout file with headers and footers that change the height of the page.

Layout file

{# if condtions, don't show header on all pages etc}
<Header/>
{/if}
  <div class="relative w-full z-[100]">
      <slot/> // The main page is rendered here 
   </div>
 {# if condtions, don't show Footer on all pages etc}
<Footer/>
{/if}

Main page I have multiple Saos elements rendered but the height of the page seems to be jumpy?

<Saos once={true} animation={'from-left 1.5s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}>
  <section class="flex items-center justify-center h-auto">
    <Features />
  </section>
</Saos>

<style>
	@keyframes -global-from-left {
		0% {
			filter: blur(2px);
			transform: rotateX(5deg) translateX(-10vw) skewX(-5deg);
			opacity: 0;
		}
		100% {
			filter: blur(0);
			transform: rotateX(0deg) translateX(0) skewX(0deg);
			opacity: 1;
		}
	}
</style>

For me, it's quite buggy and glitchy but I think that's my fault mainly because of how things are rendered.

Disable for mobile

I would like an option to disable animations for mobile devices.