saos

Animação esbelta na rolagem

Um componente esbelto muito pequeno para animar seus elementos na rolagem

SAoS permite animar uma ou várias vezes um elemento no scroll, você pode definir os "triggers" superior e inferior e o css das divs internas (não recomendado, mas pode ajudar em alguns casos), veja abaixo a demonstração, como instalar e alguns exemplos?

Em termos de desempenho, esta biblioteca usa o Intersection Observer para a maioria dos navegadores (que vergonha, Internet Explorer)

⚡ Demonstração

---

Como instalar

• Npm

 npm i saos --save-dev

• Fio

 yarn add -D saos

Nota: O Sapper suporta apenas libs como dependências DEV , se você realmente deseja usar esta lib como uma dependência normal do Sapper, certifique-se de importar assim import Saos from 'saos/src/Saos.svelte'; caso contrário você terá problemas com o SSR!

Como usar

Uso básico:

• Primeiro importe o pacote no Svelte

 import Saos from "saos" ;

• Em seguida, defina sua animação @keyframes como um -global- on 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 ;
  }
}

• Por fim, adicione o nome do quadro-chave sem os parâmetros -global- e outras animações

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

Além do parâmetro de animação, você pode usar:

• Animation_out -> para reproduzir uma animação quando o elemento não estiver mais "visível" (use a parte superior e inferior para definir isso), padrão: "none; opacity: 0"
• uma vez -> se a animação for reproduzida apenas uma vez ou várias vezes, padrão: false
• top -> o topo do observador, use um valor positivo para reproduzir a animação depois que o topo estiver visível, padrão: 0
• inferior -> a parte inferior do observador, use um valor positivo para reproduzir a animação depois que a parte inferior estiver visível, padrão: 0
• css_observer -> o css da div que é o observador, não recomendado para uso, mas está aqui?, default: ""
• css_animation -> o css da div que é a animação, não recomendado usar, mas está aqui?, default: ""

E temos despachos reativos também!

Você pode fazer 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 >

E vai funcionar! Incrível, não? dê uma olhada no último cartão da nossa demonstração

E você pode ver um monte de uso aqui

Se você tem preguiça (como eu) de criar suas próprias animações, dê uma olhada no animista