Lottie: Animações com React de um jeito FANTÁSTICO! feat. Like do Twitter
Вставка
- Опубліковано 19 жов 2024
- Você se tivesse que fazer uma animação que só o motion designer do seu trampo consegue começaria por onde? Hoje vamos conhecer uma lib muito massa do Airbnb chamada "Lottie", ela consegue pegar animações exportadas via after effects e fazer efeitos INCRÍVEIS e super fáceis de controlar e nesse vídeo vamos ver como usá-la com React! 😍
🔸Dica master
■ Se gostar, compartilha esse vídeo e me marca com #DevSoutinho :) vamo conversar por lá também!
🔸Código do Vídeo
■ GitHub : github.com/oma...
■ DEMO ONLINE : lottie-twitter...
🔸Links citados no vídeo
■ Lottie Web JS Puro: github.com/air...
■ Post do tableless: tableless.com....
■ Lottie: airbnb.design/...
■ MILHARES DE ARQUIVOS DE ANIMAÇÕES PRONTAS: lottiefiles.com/
■ Like do twitter: lottiefiles.co...
■ Abstração em React: www.npmjs.com/...
🔸Quer ver mais conteúdos meus? Segue ai!
■ / omariosouto
■ / omariosouto
■ t.me/hipstersf...
🔸Sabia que eu tenho séries na Alura também?
■ www.alura.com....
■ www.alura.com....
#react #lottie #animaçoesComReact
Topezzeira, fiz aqui deu certinho
TOP
Sensacional Mario!! Qualidade está incrível!
Vaaaleu mano!!!!! Tu tá mandando MT bem tbm!!! Tava vendo o canal
Opaaaa tmj!!
Vim pela Malena!
Que shooow!!! Saudosa malena hehe
Já viu a playlist fazendo um jogo aqui do canal?
Claro que já (mais de 1 vez)
show demais!!
Vaaaleu!!!
Nossa adorei o seu canal. parabéns. colocarei no meu projeto com certeza
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa, o que dizer desse comentário que mal li e já to feliz pakas sauhsahu valeu pelo feedback mano! Manda o projeto dps \o/
passei só pra falar que essa thumbnail foi show. uma palma de likes e de subscribes pra voce!
Hahahahah valeuzão Gui! A dupla com o @Luquinhaz tá INSANA
Cara que video incrivel, adorei, mais um inscrito. Vou maratonar o canal, primeira vez que te encontro aqui! Vlw Mario. ~Que mario?~
Ficou legal demais. Parabéns Mário!
Vaaaleu cara!
Me salvou, incrível
Cara, seus vídeos sobre front-end me fizeram apaixonar de verdade nessa área e a pesquisar mais e mais pra me evoluir nela. Obrigado mesmo cara, torço pra você fazer muito sucesso aqui 👏
Meu de coração, muito obrigado!!!
To emocionado aqui
Valeu msm! Aaaaaaaaaaa
Excelente! 😃👏👏👏👏
"Adoro esse erro... que erro bonito..." ...ri alto aqui! 😂🤣😂🤣😂🤣
Soutinho descobri teu canal da imersão de react da alura, não sei como não tenho conhecia antes. Teus videos são incríveis, a tua didática é maravilhosa. Não gostava muito de front-end, teus vídeos estão fazendo eu mudar essa percepção hahahaah.
Haahahah que massaaaaa!!!! Fico muito feliz de ler isso, seja bem vinda e fica de olho que conteúdo de Front não vai faltar nesse canal hehe
Muito massa mano. Fiquei bastante interessado, vou até ativar o sininho kk #queroanimacao
Muito obrigado!
FODA!
AAAAAAAAAA
Fala meu querido!
Resolvi seguir este lindo conselho e utilizar a biblioteca, me apaixonei pelas animações, mas obtive um problema.
Os players rodam localmente, porém em produção quebram e o react-lottie está incompativel com as ultimas versões do react.
Estou usando o NextJS 13, consegue nos clarear uma dica sobre esse porque?
Opaaa, talvez tu vai ter que adaptar na mão. O Lottie roda com JS puro, da uma conferida no site oficial e tenta por lá. Tô devendo um vídeo atualizado disso
@@DevSoutinho valeu, vou correr lá e ver o que consigo dar uma "fuçada" kk
muito bom o vídeo! 💜
Que show!!! Cada vídeo seu minha barra favoritos ganha um site a mais! Só agradeço por compartilhar tudo isso!
#queroanimacao
Caraca velho fico muito feliz de ler isso, isso me lembra o que uma amiga minha e um amigo meu da agência falavam (Letícia e junin) "o Mario sempre tem um site" HAHSHAHAHA
@@DevSoutinho hahhahaha, pra nossa sorte e do canal é verdade
Incrível amigo, sua didática é estupenda, vou explorar essa biblioteca, ela da vida a qualquer tipo de aplicação, ganhou um inscrito, continua criando vídeos sobre animação no front que a gente gosta. Valeuuuu,
Top! #QueroAnimação
Vai rolar!!! ta no meio dos roteiros aqui hahuashuas
E eu que vim na vontade de colocar logo isso no meu projeto alura quiz kkkkk
valeu mario por esse video jaja dou um git push
Alguém sabe dizer se é possível mexerno lottie de forma semelhante no react native? Tipo... colocar um botão que pausa ou inicia a animação?
Mario, essa mudança de direção não daria para colocar uma multiplicação por -1?
Que massa cara! Sou motion designer, sempre quis trabalhar com a galera de tech mas nunca entendi muito bem como esse material seria utilizado pelo dev. Ajudou bastante, vou fazer uma bibliotequinha de animações aqui =]
cara que massa!! seu jeito de mostrar como funciona é show
e os monorepos? reaproveitameneto de codigo entre react native e react? eu já tentei usar o mesmo layout do app mobile na web mas a UX ficou bem ruim.....será mesmo que é possivel reaproveitar uns 70% do codigo, como dizem?
Caraaaa, isso aí da um papo bom em hashha, mas eu particularmente em larga escala acredito que é bem difícil de fazer isso acontecer. Vai depender de uma solidez do produto muito grande que não sei se a galera tem. Eu vejo em um cenário trabalhando com Apollo + GraphQL a complexidade de acesso aos dados mais simplificada tornando possível o compartilhamento de coisas mais genéricas e estáveis. Em resumo, não acredito tanto no compartilhamento de UI Cross tudo, mas só até eu achar alguma solução que me agrade bem também haha tem várias iniciativas hoje e tal, só acho que não tão bem maduras
Cagou o meu projeto isso ai !
Me salvando no trabalho, como sempre kkkkk
#queroAnimação
Ahshahsh BOOOA!!! Manda link de prod hehe
Arrasou soutinho, faz esse vídeo de como criar a animação exportar e logo importar
vai rolar!!
Opa Mario blz?
Eu gostaria de saber se vc tem algum canal do discord, ou conhece algo, onde programadores se reunem para conversar, tirar dúvidas, ajudar, etc...
Estou procurando um, mas a maioria dos que acho estão mostos ou é slack, que não dá a mesma experiência que o discord.
Cara, volto no seu comentário mais tarde com dicas! Agora tô corrido, mas já volto
.
Opa, da uma olhada no Slack da React Brasil, lá rola altos papos legais! Eu dei uma sumida mas tô voltando /o
react-brasil-slack.herokuapp.com/
Foi mal Mário mas não posso deixar de fazer propaganda pra HE4RT devs aqui kkkkkk
Acesse heartdevs.com/ temos grupos no discord, livestreams, grupos no whatsapp e diversas iniciativas de ensino gratuito de programação, como os repositórios do 4noobs github.com/he4rt/4noobs
Chega mais
@@muril0_077 só vamo hahaha
Show demais!👏🏼👏🏼👏🏼👏🏼
#queroAnimação
Vai ter hehe
to no comeco do video ainda mas já #queroanimacao
O vídeo ficou ótimo, parabéns. Só uma dica pra galera, é uma má prática setar o estado da forma que você fez em 14:50, na verdade quando você vai setar um estado que depende dele mesmo e que tenha outras alterações de estado que podem ser concorrentes à ele, você deve utilizar o método de passar uma função para o setter do seu estado, essa função vai receber como argumento o estado anterior (o que vc quer estender a propriedade) e retornar o estado novo.
setAnimationState((oldAnimationState) => ({ ...oldAnimationState, isStopped: !oldAnimationState.isStopped }));
Muito obrigado pela correção /o/ vou ajustar no código do Github
@@DevSoutinho
@@MuriloHenriqueA inclusive muito obrigado pelos comentários, lembro que no vídeo do Styled components tu apareceu aqui /o
@@DevSoutinho é sempre uma honra poder contribuir, nem que seja com um pedacinho de código. ;)
Muito bom!
Sugestão: conteúdo de animações de coisas que devem aparecer e desaparecer. Por exemplo, um aviso na tela. Uma dúvida que tenho é, serTimeout + opacity + visibility é o ideal? Quais outras formas?
Valeuuu!
Hmmm, isso aí me cheira a vídeo da próxima semana em, fica ligeiro hahahah
@@DevSoutinho O homi não paraaaa! Hahaaha
Cadê vídeo novo!!!
Ta na mão: ua-cam.com/video/IHszfCHRfZQ/v-deo.html
Mano, sensacional essa lib e sua explicação! Parabéns!
#queroanimação
Vaaaleu!!!!!
Library desatualizada....tenta remover esse warning maroto...rsss
Ela tá usando o willMount, vou fazer um próximo vídeo mostrando como mexer com umas paradas legais em cima disso.
Por hora da pra vc usar a lib que tem por debaixo dos panos:
github.com/airbnb/lottie-web
Oi Mario, tenho um problema.
Queria usar no meu projeto uma animação de hamburguinho para o menu, mas a animação do lottie vai e volta, tem como eu fazer para a animação ir só até um certo número de frame? Revirei a internet e não achei uma maneira e quando pensei que consegui usando uma props chamada segments a animação acabou sendo executada 2x 😔 vlw
#queroAnimação
vai rolar!!!
Mario, faz um vídeo usando lottie no native
Vou ver certinho mas pode ser que rolê /o
#QUEROANIMAÇÃO
#VAIROLAR
opa adorei o video,
gostaria muito de ver um video mostrando como faz animações também
Opa #vairolar
Pô cara #QUEROANIMAÇÃO
E vai rolar!!! eu to só me organizando aqui ta vindo
#queroanimacao
Vídeo show #queroAnimação
#vairolar haha
Cara, eu só comecei a me interessar por desenvolvimento por causa do Awwwards, eu quero muito ter algum/alguns projetos ali. Traz esse conteúdo pelo amor de Jeová 😅
#queroanimacao #queroanimação #queroAnimacao #queroAnimação sério quero mesmo kkkk
Esse vídeo sem dividas foi um divisor de águas para mim, agora eu sei pra onde olhar para aprender algo que eu queria mas não sabia por onde começar.
MUITO OBRIGADO, DOS VERA VALEU ✌🏽
VAI VIM! ahahahah
Awwards me motivou muito também, pelo bem e pelo ódio ayshahsh
Vc é brabo 🔥🔥🔥
#queroanimacao
Vaaaleu cara \o/ #vairolar
Cara que vídeo show, já apliquei em um projeto, peque que o dono não autorizou a divulgação rsrs.
#QUEROANIMACAO
#QueroAnimacao
Vai rola!!!
Exacelente vídeo e didática! Ensina animação, please!
Vaaaleu!!! E vai rolar :)
#queroanimção
#vairolar
#queroanimacao video incrível!
#vairolar aaaaaaaaaaaaaaaaaaaa
Não consegui fazer isso funcionar nem a pau
Vish! Qual erro deu??
@@DevSoutinho poxa Soutinho, faz tanto tempo que já nem lembro. Mas seu comentário reacendeu a vontade de mexer no lottie. Vi que vc vai fazer umas aulas sobre next.js react e o lottie vai entrar no meio, né isso? Vou acompanhar lá, dessa vez vai dar certo. Abraços, vc é o melhor
@@DevSoutinho Consegui! Mds, 10 meses depois eu aprendi tanta coisa. Foi mel na chupeta dessa vez. Vlw soutinho seu lindo
#queroanimacao 👏👏👏
Vai rolar!!!
boa noite, teria como usar o Lottie no Typescript? nao consigo fazer a instalação do react-lottie da o seguinte erro Could not resolve dependency: peer react@"^0.14.7 || ^15.0.0 || ^16.0.0" from react-lottie@1.2.3. a minha versão do react é a 18.2
Instala a biblioteca de tipos @types/react-lottie
Seu vídeo tem um bom conteúdo e ótima qualidade, mas você enrola muito e isso faz perder a vontade de assistir. Tenta reduzir seus vídeos para 10 minutos ou menos, fica dica.
#QUEROANIMAÇÃO
Vai rolar \o/
#queroanimacao
#vairolar
#QueroAnimação
Vai rolar!!!
#QUEROANIMAÇÃO
#queroanimacao
#vaiRolar
#queroanimacao
#vaiTerEVaiTerMuito
#queroanimacao
Vai rolar /o
#queroanimação
#demorouMasVairolar
#queroanimação
#vairolar!
#queroanimação
#vairolar
#queroanimação
#vairolar haha
#queroanimação
#vairolar
#queroanimação
#vairolar
#queroanimacao
#queroanimação
#queroanimação
#queroanimacao
Vai rolar!!!