saos

Animación esbelta en desplazamiento

Un componente muy pequeño y esbelto para animar tus elementos en desplazamiento.

SAoS le permite animar una o varias veces un elemento en el desplazamiento, puede definir los "activadores" superiores e inferiores y el CSS de los divs internos (no recomendado, pero puede ayudar en algunos casos), consulte la demostración a continuación, cómo instalar y algunos ejemplos?

En términos de rendimiento, esta biblioteca utiliza Intersection Observer para la mayoría de los navegadores (qué vergüenza, Internet Explorer).

⚡ Demostración

---

Cómo instalar

• Npm

 npm i saos --save-dev

• Hilo

 yarn add -D saos

Nota: Sapper solo admite bibliotecas como dependencias DEV , si realmente desea utilizar esta biblioteca como una dependencia normal en Sapper, asegúrese de importar de esta manera import Saos from 'saos/src/Saos.svelte'; ¡O de lo contrario tendrás problemas con SSR!

como usar

Uso básico:

• Primero importe el paquete en Svelte

 import Saos from "saos" ;

• Luego define tu animación @keyframes como -global- en esbelta

 @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 ;
  }
}

• Finalmente agregue el nombre del fotograma clave sin los parámetros de animación -global- y los demás.

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

Más allá del parámetro de animación, puedes usar:

• Animation_out -> para reproducir una animación cuando el elemento ya no sea "visible" (use la parte superior e inferior para definir esto), predeterminado: "ninguno; opacidad: 0"
• una vez -> si la animación se reproducirá solo una o varias veces, valor predeterminado: falso
• arriba -> la parte superior del observador, use un valor positivo para reproducir la animación después de que la parte superior sea visible, predeterminado: 0
• abajo -> la parte inferior del observador, use un valor positivo para reproducir la animación después de que la parte inferior sea visible, predeterminado: 0
• css_observer -> el css del div que es el observador, no se recomienda su uso, pero ¿está aquí?, predeterminado: ""
• css_animation -> el css del div que es la animación, no se recomienda su uso, pero ¿está aquí?, predeterminado: ""

¡Y también tenemos despachos reactivos!

Puedes hacer algo como:

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

¡Y funcionará! Increíble ¿no? Eche un vistazo a la última tarjeta de nuestra demostración.

Y puedes ver un montón de usos aquí.

Si te da pereza (como a mí) crear tus propias animaciones, echa un vistazo a animista