“Abstraia a complexidade, apenas faça.”

A WideSmile é uma biblioteca de animação construída em TypeScript / JavaScript, seu principal objetivo é entregar um mecanismo moderno de animação que atenda verdadeiramente as necessidades do desenvolvedor. Sendo uma nova forma de estruturar animações, deixando mais simples, direta e elegante.

Atenção

Em breve nossa biblioteca passará por uma grande mudança (breaking change). Coisas novas e incríveis estão por vir, por favor aguarde e apoie o projeto.

Molho secreto

O molho secreto pode ser encontrado no momento em que declaramos nossas primeiras animações, em que praticamente nenhuma complexidade é exposta, mas por de baixo dos panos estamos utilizados técnicas muito interessantes. Há também novos recursos e conceitos simples e poderosos, como por exemplo: Creators, Performers, Special properties , Observed properties e outros, além de atalhos que agilizam o processo de criação de animações.

Compatibilidade

A WideSmile funciona muito bem em todos os principais navegadores desde o IE9(Internet Explorer, versão 9).

Instalando

Instale a wide-smile a partir do npm:

npm i wide-smile

Instale a wide-smile a partir do yarn:

yarn add wide-smile

Adicionando

ES6 modules

Importando via módulo:

import wS from 'wide-smile';

CommonJS

Exigi-lo como você faria com qualquer outro módulo:

const wS = require('wide-smile');

<script>

Inclua-o através de uma tag script.

<script src="wide-smile/wide-smile.min.js"></script>

Usando CDNs:

Usando jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/wide-smile@0.1.4/wide-smile.min.js"></script>

<!-- Ou -->

<!-- Sempre baixará a versão mais recente. -->
<script src="https://cdn.jsdelivr.net/npm/wide-smile/wide-smile.min.js"></script>

Usando unpkg CDN:

<script src="https://unpkg.com/wide-smile@0.1.4/wide-smile.min.js"></script>

<!-- Ou -->

<!-- Sempre baixará a versão mais recente. -->
<script src="https://unpkg.com/wide-smile/wide-smile.min.js"></script>

Primeiros passos

Ao adicionar a biblioteca em sua aplicação você terá acesso a uma função chamada wS(abreviação de WideSmile), a partir dela podemos dar início a construção de nossas animações.

Hello world - Apresentando a estrutura

Por fim, nada melhor que um bloco de código para entendermos na pratica. A linha de código abaixo realizaria a nossa primeira animação:

wS('div', 2)('height', 200);

Como assim só isso?. Calma têm mais!. E se quiséssemos que após a conclusão dessa animação outra se iniciasse?:

wS('div', 2)('height', 200)._('width', 200);

Simples e direto não é?. E se quiséssemos que essa nova animação tivesse uma "irmã" que iniciaria sua execução ao mesmo tempo que ela, mas que a sua duração fosse diferente?:

wS('div', 2)('height', 200)._('width', 200)('opacity', 0, 1);

Estes exemplos são apenas uma degustação, mas que tal uma última?:

wS().newObservedProperty('Text', (v, p, e) => {
  e.textContent = v.toString().substring(0, (v.length / 100) * p);
});

wS('div', 1, 'easeOutInSine', {
  delay: '0.1 <>',
})
  .cycle(5, 'alternate')
  ._('backgroundColor', 'red')
  .after(1)('height_width', 200, 'easeInBounce')
  ._(0, 'blue')
  ._({
    Text: ['...', 'Hello world... Master!!!'],
    fontSize: 50,
  });

---

Demos e exemplos

• CodePen wide-smile collection

---

Novidades(versão - 0.1.4):

• Podemos adicionar ouvintes para serem chamados quando a animação alcançar um determinado tempo em execução.

  wS('div')('height', 50).on('0.5s', (o) => {
    /*...*/
  });

• Nova método: wait().

Novidades(versão - 0.1.0):

Esta nova versão conta com novidades importantes:

• Cobertura de testes: Agora a wide-smile consegue ter mais segurança e garantir que seus principais recursos funcionem da maneira esperada.

• Novos métodos: now(), set(), remove(), get(), removeTarget().

• Nova propriedade: reset.

• Podemos adicionar ouvintes em propriedades de animação (top, height, color...). Com isso, podemos obter o valor que será aplicado à determinada propriedade a cada intercalação da animação (nós também podemos impedi-lo de ser aplicado).

  wS('div')('height', 50).on('height', (o) => {
    /*...*/
  });

• Também houve melhoramento do código fonte e da documentação.

---

IMPORTANTE:

Nossa biblioteca está nas suas versões iniciais, mas verá que ela possui um grande potencial de crescimento(Documentação). Por isso, esse é o melhor momento para você contribuir! E o melhor, você pode escolher como:

• Participe do desenvolvimento do código, criando propriedades customizadas e animações e compartilhando com comunidade, sugerindo novas futures ou desenvolvendo diretamente conosco.

• Feedback, sua opinião é importantíssima, afinal estamos desenvolvendo para você.

• Divulgando a wide-smile, faça com que mais pessoas conhecerem nossa biblioteca, compartilhe em suas redes sociais e colegas da área.

• Colaborando na documentação, nossa biblioteca merece uma documentação cada dia melhor, além de uma versão em Inglês, mas para isso precisamos da sua ajuda. Colabore diretamente na documentação atual ou faça artigos próprios da forma que desejar.

• Doando subsídios financeiros, até o momento, os desenvolvedores não recebem retorno financeiro. Se você gostou do projeto e quer propiciar o desenvolvimento dela, pense em apoiar.

Por fim, não se prenda a essa lista, como dito, você pode ajudar da maneira que desejar. Entre em contato.

---

Documentação     |    MIT License. © Diogo Neves