Como animar a tua aplicação sem complicações
Anima a tua aplicação React com Framer Motion
Já te perguntaste como será possível concretizar todas aquelas animações loucas que por vezes visualizas em alguns websites e aplicações sem que seja um cabo dos trabalhos? Pois bem, estou aqui para te explicar como.
Com o Framer Motion é possível realizar vários tipos de animações de bastante complexidade através de uma sintaxe muito intuitiva e com poucas linhas de código. Sim, é mesmo assim tão fácil!
Neste artigo vais poder perceber a pertinência da biblioteca Framer Motion e como usar algumas das funcionalidades core da mesma. Vais poder entender como usá-la em vários casos práticos como: animar entre transições de páginas, abrir um card de forma animada, animar um botão através de eventos e, de uma forma geral, como usar o react e styled components a nosso favor quando utilizamos esta biblioteca de animações.
Numa era em que cada vez mais é difícil captar a atenção dos utilizadores de produtos multimédia, os conteúdos interativos e animados poderão ser umas das melhores soluções para acrescentar valor às aplicações web. Visto que, cada vez mais é necessário tornar um website apelativo para o utilizador final e conceder-lhe a chance de poder interagir com os conteúdos de uma página de forma mais direta. Este pormenor poderá fazer como que decida investir uma maior parte do seu tempo a explorar a página e com isto beneficiar os designers e desenvolvedores para a web que o produziram, de forma que o produto web possa ser utilizado como foi inicialmente idealizado.
Assim sendo, o Framer Motion mostra-se como uma das melhores ferramentas para a implementação de animações em React.
Se quisermos ir um pouco às origens do Framer Motion, esta é uma biblioteca sucessora do Pose by Popmotion, uma biblioteca de animações para React, React Native e Vue, agora descontinuada. O Framer Motion foi criado para permitir a implementação das mesmas funcionalidades da biblioteca anterior, mas agora de uma forma mais simplificada.
Framer Motion
O Framer Motion é atualmente mantido pela equipa do Framer. O Framer é um pouco diferente da biblioteca em destaque neste artigo, mas ambas partem do mesmo princípio, a fácil criação e desenvolvimento de componentes interativos. O Framer é assim uma ferramenta que permite a elaboração de elementos de designs interativos para a web através da criação de componentes em equipa. Ou seja, um Figma, mas em esteróides!
Para além disto, a relação entre o Framer e o Framer Motion pode ser muito benéfica para a criação de produtos web, no sentido que consegue resolver o problema da passagem do design para a sua fase de desenvolvimento, o chamado de design handoff. Deste modo, o uso da mesma biblioteca na fase de prototipagem realizada pelos designers e no desenvolvimento para produção pelos seus programadores será uma maneira mais eficiente de garantir a harmonia entre o que foi prototipado e o que é de facto desenvolvido.
O Framer Motion é uma biblioteca de animações open-source e production-ready para o React. A grande promessa desta biblioteca é a sua sintaxe declarativa que permite o uso de menos código. Usando-se menos código temos pelo menos duas vantagens: a maior legibilidade do código desenvolvido e da sua manutenção.
Dado que esta tecnologia permite o uso de variados tipos de animação, através de uma sintaxe tão simples e também de poder proporcionar animação de conteúdo com alguma complexidade, esta é sem dúvida uma boa aposta para o seu uso com React.
Get Started
É possível usar o Framer Motion num projeto que tenhas desenvolvido em React (React 16.8 ou superior) e é tão fácil como instalar a dependência do framer-motion através do NPM.
npm install framer-motionDe seguida é necessário importar o elemento motion para os componentes en que queres incluir uma animação.
import { motion } from ‘framer-motion’Deste modo, é possível usar o elemento motion em qualquer que seja a tag de HTML usando-se a propriedade animate de forma a indicar o que vai ser animado.
<motion.button animate={{opacity: 0.5}} ></motion.button>Neste exemplo acima o botão com o elemento motion animaria para uma opacidade inferior assim que o componente fosse mostrado na página.
Motion com Styled Components
Se no teu projeto react usares styled components, também é possível adicionar o elemento de motion ao styled component criado para que este possa ser animado. Através da seguinte forma:
const MyButton = styled(motion.button)`background: #F17F29;border-radius: 30px;`...return (<MyButton animate={{x:100}} transition={{duration: 1}}>Click Me!</MyButton>)
Propriedades Framer Motion
A propriedade animate, que já pudeste ver em algum código acima, permite que seja aceite um objeto de valores que automaticamente muda o componente motion e o anima assim que uma das suas propriedades mude. Ou seja, assim que o componente seja renderizado a sua animação irá ocorrer. É permitido usar-se propriedades como o x e y (animar em relação à posição), o scale (animar o tamanho), o rotate (animar a rotação), a opacity (animar opacidade), a color (animar a cor) e entre outras propriedades para que o componente anime segundo o que for definido nesta prop.
Para além da propriedade animate podemos definir um estado inicial à animação ou um estado que seja ativado no seu fim. Para isso basta usar as props initial e exit respetivamente.
É também possível definir-se transições entre o estado inicial e o estado animado. Normalmente define-se no parâmetro transitions qual será a durantion (duração da animação), o delay (duração de atraso), o type (o tipo de animação: inertia, spring ou tween), etc.
Para perceberes um pouco melhor estes conceitos apresento-te o seguinte exemplo:
Animação Entre Páginas
Neste exemplo temos um componente AnimatedPage que representa a animação das páginas.
Assim sendo, a rota para a página que contém o componente acima descrito e e também os outros componentes filhos (que correspondem ao conteúdo da página) terão uma animação que mexe com a opacidade e a posição dos conteúdos sempre que for carregada ou assim que esse componente deixar de existir, como podemos ver pela declaração do initial, do animate e do exit. Além disso, foi definida no transition uma duração da animação de 0.7 segundos.
No entanto, para que a animação de saída ocorra sem que a próxima se sobreponha à da página seguinte é necessário usar o componente do framer motion AnimatePresence com a propriedade exitBeforeEnter que permite que os componente animem assim que são removidos da aplicação mas somente um de cada vez. Neste exemplo, foi também necessário o useLocation para que se diferencie a rota e a consequente animação nas diferentes páginas.
Variants & React Hooks
Outra propriedade importante para se utilizar com esta biblioteca são as variants. As variants permitem-nos criar animações que se propagam pelo DOM, sendo assim possível animar subárvores de componentes com um único animate. Como podemos ver no seguinte exemplo:
Por outro lado, a propriedade variants permite definir múltiplos estados para as nossas animações. Para isso, vamos analisar o seguinte exemplo:
Animação de Cards
Podemos usar react hooks como o useState a nosso favor para que o componente anime dependendo do estado que possuí no momento. Para o fazer passamos na propriedade variants um objeto com diferentes objetos que contêm propriedades de estilo diferentes que irão ser ativados no componente consoante o estado presente.
Neste exemplo conseguimos perceber que: o card irá animar para um tamanho maior, irá mudar a sua cor e irá ter conteúdo diferente caso haja um clique no mesmo. Isto é possível conjugando o uso do animate e das variants consoante o estado do isModal. Neste caso, se o estado for true então o conjunto de estilos definidos na constante variants “active” será o responsável por estilizar o componente e dará um efeito de quase abrir uma modal de forma animada.
Podemos também aproveitar a forma como recebemos a nossa informação de modo que ao mapear a informação dos cards seja possível passar a sua posição no array e com isso animar os cards de forma diferente. Para isso o seu estado inicial de animação no initial foi também definido para que os cartões pares animassem de forma diferente dos ímpares.
Animação por Eventos
Com já pudeste perceber, o Framer Motion possibilita reconhecer eventos realizados pelo utilizador para que a partir destes seja possível originar animações. São estes eventos o hover, tap, pan e drag.
No exemplo apresentado são usadas as propriedades whileHover e whileTap, que permitem que a animação ocorra assim que for realizada uma sobreposição do rato ou um clique no botão, respetivamente. Por outro lado, a propriedade drag permite que possamos arrastar o botão por toda a página, como por magia.
Reflexão Final
Como pudeste constatar é possível fazer isto e muito mais com a biblioteca react Framer Motion.
Na minha opinião, penso que esta ferramenta sendo de livre acesso, poderá ajudar muitos web developers a criar pequenas ou grandes animações facilitando-lhes a forma como criam conteúdo animado, visto que a aprendizagem da sintaxe não requer um grande esforço. Assim sendo, e dado que o React é ainda muito usado para se desenvolver no frontend, esta biblioteca mostra-se muito relevante no que toca à implementação de conteúdo animado na web.
Como já referido no início deste artigo é notória a pertinência do uso de Framer Motion para quando se procurar animar conteúdo em páginas web e como a biblioteca é uma recurso valioso em aplicações React, dado que no final de contas a interação dos conteúdos de uma página web podem fazer toda a diferença para a experiência do utilizador.
Caso estejas interessado podes sempre visitar a documentação da biblioteca onde podes aprender muito mais sobre outros tipos de funcionalidades que o Framer Motion oferece (Motion Documentation).
Por outro lado, se quiseres experimentar e usar o código desenvolvido para realização dos exemplos práticos deste ensaio teórico podes sempre ver o código desenvolvido aqui.
