Começando com SVG no Front-End - Parte 3 - Animações com mo.js (Motion Graphics) \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 01 Min 21 Seg Tempo restante da oferta: 14 01 21 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Começando com SVG no Front-End - Parte 3 - Animações com mo.js (Motion Graphics) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # Começando com SVG no Front-End - Parte 3 - Animações com mo.js (Motion Graphics) Aprenda a criar animações incríveis e interativas de forma bem simples para a web utilizando o mo.js [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071214/front-end-motion-graphics.png) Olá Web Developers! Vamos ver como criar animações incríveis de elementos SVG usando o [mo.js](https://mojs.github.io/ "mo.js"). Esse é o terceiro post de três sobre [como começar a usar SVG](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-1/ "como começar a usar SVG"). Na segunda parte vimos [como iniciar na criação de SVG com o Inkscape](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-2-trabalhando-com-inkscape/ "como iniciar na criação de SVG com o Inkscape"). Agora veremos como fazer animações de SVG com JavaScript. ## O que é mo.js? `mo.js` é uma biblioteca JavaScript para criar belas animações com ótima performance com uma API bem simples. Podemos animar elementos HTML, mas sua principal função é animar elementos SVG. No exemplo abaixo podemos ver o poder desta biblioteca, tudo feito com SVG e utilizando apenas o `mo.js`. Sim, isso é um SVG animado com JavaScript, não é um vídeo!!! ## Iniciando com mo.js ### Instalação Primeiro é preciso inserir a biblioteca do mo.js no seu projeto. Você pode adicionar com `` ou instalando com o npm executando `npm i @mojs/core` e importando com `import mojs from '@mojs/core`. ### Criando Formas Vamos começar criando um círculo (circle). Para isso utilizamos o método `.Shape()`, para o qual passamos um objeto com algumas configurações. ```js new mojs.Shape({ shape: 'circle', fill: '#F64040', radius: 20, isShowStart: true, }) ``` Há outras formas como rect, polygon, line, cross, equal, curve e zigzag. Também podemos criar nossa própria forma com SVG e registrar com o nome que quisermos, nos permitindo animá-la. O código acima terá o seguinte resultado: Vamos entender o que passamos para o método `.Shape()`: - `shape` indica a forma que queremos criar. Pode ser uma das já existentes ou o nome de uma forma que nós registramos com nosso próprio SVG. - `fill` indica a cor de preenchimento do elemento, assim como vimos nos posts anteriores. Então você pode usar aqui outras propriedades do SVG, como `stroke`, `strokeWidth`, etc - `radius` é usado para indicar o raio da forma - `isShowStart` indica se a forma deve iniciar visível na tela, pois você pode querer que a forma apenas seja exibida quando a animação iniciar No exemplo que fizemos, o círculo foi criado e injetado no corpo da nossa página, mas provavelmente você vai querer ter controle sobre onde nossa forma será inserida. Para isso basta adicionar ao objeto de configuração a propriedade `parent`. Você pode passar o seletor do elemento que receberá a forma, como “#meu-id”, ou passar o próprio elemento HTML. ### Animando Formas Quando executamos o método `.Shape()` teremos como retorno um objeto com as configurações que criamos e métodos que podemos usar para executar a animação. Então vamos salvar esse retorno: ```js const animation = new mojs.Shape({ ... ``` Para iniciar a animação basta executar o método `.start()` do retorno que salvamos em `animation`. Então vamos criar um botão para executarmos a animação quando quisermos. ```html Iniciar ``` ```js function startAnimation(){ animation.start(); } ``` Obviamente que não acontecerá nada, pois nós ainda não indicamos quais propriedades queremos animar. Para animar uma propriedade nós passamos um objeto, onde a chave será o valor inicial e o valor será o valor final. Pense como exemplo a propriedade `radius`, que indicamos o valor inicial como 20. Se quisermos animar esta propriedade, precisamos mudar o `20` para um objeto. Vamos fazer algumas alterações e depois entender o que foi feito: ```js const animation = new mojs.Shape({ shape: 'circle', fill: { '#F64040': '#FC46AD' }, radius: { 20: 80 }, duration: 2000, isYoyo: true, isShowStart: true, easing: 'elastic.inout', repeat: 1, }) ``` Mudamos o valor de `fill` de apenas `#F64040` para um objeto que possui como chave `#F64040` e `#FC46AD` como valor. Isso fará a animação iniciar com o valor da chave e ir para o valor de `#FC46AD`. O mesmo fizemos com o `radius`, fazendo com que na animação ele vá de 20 para 80. Adicionamos a propriedade `duration`, indicando que queremos uma animação com duração de 2 segundos (2000 milisegundos). Também adicionamos outras propriedades que podem ajudar a deixar a animação interessante: `isYoyo` indica se queremos que a animação, ao chegar ao final, faça o caminho inverso, voltando ao estado inicial. `easing` nos permite indicar uma função de animação e `repeat` indica quantas vezes queremos que a animação seja repetida. Teremos o seguinte resultado: Dentro do objeto de configuração também podemos passar funções que serão executadas a cada momento da animação, como `onProgress`, `onStart`, `onFirstUpdate`, `onUpdate`, `onComplete`, etc, nos possibilitando ter mais controle da animação. ### Burst Também temos outras funcionalidades que nos facilitam a criação de animações mais complexas. O `Burst` nos ajuda a criar um efeito parecido com uma explosão, como no exemplo abaixo: Para conseguir esse resultado, primeiro vamos mudar o `.Shape` para `.Burst` e mudar um pouco as nossas configurações: ```js const animation = new mojs.Burst({ radius: { 0: 100 }, count: 5, angle: { 360: 0 }, children: { shape: 'circle', fill: { '#F64040': '#FC46AD' }, radius: { 20: 80 }, duration: 2000 } }) ``` Veja que as propriedades relacionadas à nossa forma `circle` foram para dentro de um campo `children`. Agora ele é um elemento filho da nossa animação. Na parte de fora nós configuramos a explosão. `radius` do lado de fora indica o tamanho do elemento da explosão, enquanto o `radius` dentro de `children` está indicando o raio de cada um dos círculos. Usamos `angle` para girar o nosso elemento, e `count` nos permite indicar quantos círculos nós queremos. Esta foi uma introdução bem simples ao mo.js. Brinque com suas propriedades e veja exemplos que há no site da biblioteca para ter ideias. Compartilhe aí nos comentários com a gente a sua criação. - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) - [ #Edição de SVG ](https://www.treinaweb.com.br/blog/tag/edicao-de-svg) - [ #SVG ](https://www.treinaweb.com.br/blog/tag/svg) - [ #Introdução ao SVG ](https://www.treinaweb.com.br/blog/tag/introducao-ao-svg) - [ #Motion Graphics ](https://www.treinaweb.com.br/blog/tag/motion-graphics) - [ #Animação de SVG ](https://www.treinaweb.com.br/blog/tag/animacao-de-svg) - [ #Animações CSS ](https://www.treinaweb.com.br/blog/tag/animacoes-css) - [ #Animação no Front-End ](https://www.treinaweb.com.br/blog/tag/animacao-no-front-end) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071147/intro-svg-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 1 ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-1) Aprenda a começar a trabalhar com SVG para a criação de formas e efeitos no Front-End. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071245/intro-inkscape-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ Começando com SVG no Front-End - Parte 2 - Trabalhando com Inkscape ](https://www.treinaweb.com.br/blog/comecando-com-svg-no-front-end-parte-2-trabalhando-com-inkscape) Aprenda a criar formas e imagens vetoriais em SVG para usar em suas páginas web de maneira bem simples com este tutorial de introdução ao Inkscape. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/05/04133905/softwares-gratis-vs-softwares-pagos-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 7 anos atrás ## [ Softwares Pagos: Por que grandes empresas costumam utilizá-los? ](https://www.treinaweb.com.br/blog/softwares-pagos-por-que-grandes-empresas-costumam-utiliza-los) Entenda os motivos de grandes empresas normalmente utilizarem softwares pagos ao invés de soluções gratuitas existentes no mercado. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/12/13105826/clipboard-js-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ clipboard.js - Copiar e Colar com JavaScript ](https://www.treinaweb.com.br/blog/clipboard-js-copiar-e-colar-com-javascript) Aprenda a copiar textos para a área de transferência de forma simples e descomplicada com o clipboard.js. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/grid-layout-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ Começando com o novo CSS Grid Layout ](https://www.treinaweb.com.br/blog/comecando-com-o-novo-css-grid-layout) Aprenda um pouco mais sobre o CSS Grid Layout, agora com suporte completo pelo Firefox e Chrome. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/08/java-csharp-ou-php-qual-linguagem-escolher-400x280.jpg) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 9 anos atrás ## [ Java, C# ou PHP: qual linguagem escolher? ](https://www.treinaweb.com.br/blog/java-csharp-ou-php-qual-linguagem-escolher) Qual linguagem escolher? Java, C# ou PHP? Quais são as vantagens de cada uma? Vamos analisar estas dúvidas que são comuns para quem está começando. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/depura--o-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 10 anos atrás ## [ Depuração de código PHP ](https://www.treinaweb.com.br/blog/depuracao-de-codigo-php) Como fazer a depuração de código PHP? Essa é uma dúvida recorrente do pessoal que está vindo de outras linguagens ou que está começando a escrever projetos um pouco mais complexos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/adquirir-confianca-TI-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 3 anos atrás ## [ Como ganhar confiança em minhas habilidades e conhecimentos na área de TI? ](https://www.treinaweb.com.br/blog/como-ganhar-confianca-em-minhas-habilidades-e-conhecimentos-na-area-de-ti) Veremos nesse artigo algumas estratégias que você pode aplicar, se tornando mais confiante para alcançar os seus objetivos profissionais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/DICAS-PORTIFOLIO-400x280.jpg) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 4 anos atrás ## [ 3 dicas para o seu portfólio ](https://www.treinaweb.com.br/blog/3-dicas-para-o-seu-portfolio) Será que você está dando a devida atenção ao seu portfólio? Veremos neste artigo 3 dicas para você deixá-lo pronto para utilizar quando precisar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/05/como-conseguir-sua-primeira-oportunidade-de-desenvolvedor-a-junior-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 5 anos atrás ## [ Como conseguir sua primeira oportunidade de desenvolvedor(a) júnior ](https://www.treinaweb.com.br/blog/como-conseguir-sua-primeira-oportunidade-de-desenvolvedora-junior) Neste artigo, separamos algumas dicas para te ajudar a se destacar no mercado, nessa caminhada até a tão sonhada primeira vaga. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/23215528/capa-boas-praticas-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 7 anos atrás ## [ Boas práticas de programação para iniciantes ](https://www.treinaweb.com.br/blog/boas-praticas-de-programacao-para-iniciantes) Veja neste artigo algumas boas práticas que você deve adotar enquanto escreve seu código. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 01min 21s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58