saos

Animation svelte sur défilement

Un tout petit composant svelte pour animer vos éléments au scroll

SAoS permet d'animer une ou plusieurs fois un élément au scroll, vous pouvez définir les "déclencheurs" haut et bas ainsi que le css des divs internes (non recommandé, mais peut aider dans certains cas), voir ci-dessous la démo, comment installer et quelques exemples ?

En termes de performances, cette lib utilise Intersection Observer pour la plupart des navigateurs (honte à vous Internet Explorer)

⚡ Démo

---

Comment installer

• Npm

 npm i saos --save-dev

• Fil

 yarn add -D saos

Remarque : Sapper ne prend en charge que les bibliothèques en tant que dépendances DEV , si vous souhaitez vraiment utiliser cette bibliothèque comme dépendance normale sur Sapper, assurez-vous d'importer comme ceci : import Saos from 'saos/src/Saos.svelte'; sinon vous aurez des problèmes avec SSR !

Comment utiliser

Utilisation de base :

• Importez d’abord le package sur Svelte

 import Saos from "saos" ;

• Définissez ensuite votre animation @keyframes comme une animation -globale- sur svelte

 @keyframes -global-from-left {
  0 % {
    transform : rotateX ( 50 deg ) translateX ( -200 vw ) skewX ( -50 deg );
    opacity : 1 ;
  }
  100 % {
    transform : rotateX ( 0 deg ) translateX ( 0 ) skewX ( 0 deg );
    opacity : 1 ;
  }
}

• Ajoutez enfin le nom de l'image clé sans les paramètres -global- et les autres animations

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

Au-delà du paramètre d'animation, vous pouvez utiliser :

• animation_out -> pour jouer une animation lorsque l'élément n'est plus "visible" (utilisez le haut et le bas pour définir cela), par défaut : "aucun ; opacité : 0"
• une fois -> si l'animation ne sera jouée qu'une ou plusieurs fois, par défaut : false
• top -> le haut de l'observateur, utilisez une valeur positive pour lire l'animation après que le haut soit visible, par défaut : 0
• bottom -> le bas de l'observateur, utilisez une valeur positive pour lire l'animation une fois que le bas est visible, par défaut : 0
• css_observer -> le CSS du div qui est l'observateur, non recommandé à utiliser, mais est-il ici ?, par défaut : ""
• css_animation -> le CSS du div qui est l'animation, non recommandé à utiliser, mais est ici ?, par défaut : ""

Et nous avons aussi des dépêches réactives !

Vous pouvez faire quelque chose comme :

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

Et ça marchera ! Incroyable non ? jetez un oeil à la dernière carte de notre démo

Et vous pouvez voir un tas d'utilisations ici

Si vous avez la flemme (comme moi) de créer vos propres animations, jetez un oeil à animista