Animações de scroll com CSS puro (Scroll-driven Animations)

[@luizndo]

Eu tenho 44 anos, desde 2010 que não trabalho mais com CSS. Sou dos tempos do Maujor e Zen Garden, quando jQuery começou a aparecer. Esse vídeo deixou meu eu do passado emocionado. Que maravilhoso ver isso funcionando. CSS é um labirinto para quem não conhece mas tem toda uma lógica que faz maravilhas. Obrigado pelo vídeo que apareceu despretenciosamente na minha timeline e trouxe essa felicidade. Deu até uma coceirinha e já andei assistindo outros videos seus. Parabéns pelo conteúdo com exemplos tão claros.

[@dpwoficial]

Eu que agradeço DEMAIS por suas palavras, Luiz. De verdade. Foi justamente com Maujor e Zen Garden que também iniciei os estudos com CSS. Boas épocas. A gente era feliz e não sabia... :) Nos últimos anos, CSS evoluiu DEMAIS e a tendência é manter esse ritmo. Aproveita que seu eu do passado que gostava de CSS despertou, que vem muito mais coisa boa por aí.

[@DiogoLScarmagnani]

Rapaz, pra fazer landing page ou página pessoal com portfólio isso vai ser uma mão na roda! Do ano passado pra cá o CSS tem lançado várias ferramentas interessantes nativas, teve o :is, o :has, o scroll-behavior smooth, mês passado tbm descobri q agora suporta o “& nesting selector” e agora descubro essa feature incrível de animações em scroll. Sensacional demais!

[@dpwoficial]

CSS tá bala!

[@dpwoficial]

Moçada, no vídeo esqueci de mostrar o suporte, mas, no momento da publicação, funciona nos principais navegadores (Firefox com flag), menos no Safari (AKA "o novo IE"). Outra informação bem legal é que a performance ao se fazer animações semelhantes com JS e CSS, na grande maioria dos casos, fica melhor usando CSS puro (Scroll-driven Animations). 👊 Enquanto o suporte não fica mais próximo de 100%, eis um polyfill que parece bem interessante: github.com/flackr/scroll-timeline

[@GustavoSantos-cy4du]

Que show, a maioria dessas animações usamos JS, ainda mais a parte do indicador. Muito bom ver o css renovando….

[@dpwoficial]

CSS tá uma coisa linda!

[@gome_ss]

Valeu pelo vídeo! Essa atualização é simplesmente meu sonho

[@dpwoficial]

É o nosso, meu amigo. É o nosso. 🥲

[@salvimateus]

sensacional, obrigado!

[@dpwoficial]

Eu que agradeço, meu consagrado. Some não. :)

[@Matheus.Stopinski]

Rolando lero falando agora: "Amado mestre...." Muito obrigado pela aula. Vc é show!!!!

[@dpwoficial]

E o salário, ó... 🤏

[@ramonoliveira_dev]

Show! 👏🏽👏🏽👏🏽👏🏽

[@dpwoficial]

\o/

[@eduardophelipe1502]

Muito interessante , vou até dar uma olhada no seu mini-curso , parabéns.

[@dpwoficial]

Olha sim, Eduardo. Se você gostou aqui do Scroll-driven Animations, com certeza, você vai gostar. :)

[@gustavolins7664]

Tu és o Monstro do CSS! 😂👏

[@dpwoficial]

😂👊

[@ericnevesr]

Que massa cara, curti demais!!!

[@dpwoficial]

vlwww

[@mksvncs]

Perfeito! Eu adoro CSS vanila pois tenho controle total do código.

[@dpwoficial]

Eu também! 👊

[@realdrumfan]

show de bola!

[@dpwoficial]

🤙

[@CarlosXavier_]

Muito show, obrigado por compartilhar, já trabalho com desenvolvimento web e vou usar em meus projetos!

[@dpwoficial]

Eu que agradeço pela participação, Carlos. Esqueci de falar no vídeo, mas a performance de scroll-driven animations é bem melhor que quando usa JS. :)

[@CarlosXavier_]

@@dpwoficial Muito bom mesmo, faço animações de scroll com JS e dessa forma nativo no CSS tem várias possibilidades para animar 😁

[@camila.mergulhao]

Que maravilha! Vai facilitar muito o trabalho dos front´s.

[@dpwoficial]

Vai mesmo, Camila! o/

[@brunopereira8325]

Que video bom👏🏽

[@dpwoficial]

vlw, Bruno!

[@NERDboy]

muito top...... Tárcio.... bem que vc poderia fazer um fazer um novo vídeo com o restante das animações css... quem concorda dar um like....

[@dpwoficial]

Posso fazer sim, mas de que "restante" você tá falando? Animações são infinitas. =P

[@NERDboy]

@@dpwoficial opa maravilha, como estou aprendendo ainda, eu não sabia que era infinitas... hehe. Fiquei muito feliz por sua reposta.... de qualquer forma, é uma ótima notícia... Já estou no aguardo do seu segundo vídeos de animações... E quando sair o segundo vídeo, comentarei que estarei no aguardo do terceiro heheh..... TMJ Tárcio... sucesso sempre

[@dpwoficial]

@@NERDboy Muito obrigado!

[@albertlima-md5bc]

mano ainda não tinha visto essa. Muito obrigado isso com certeza vai dar uma alavancada nos meus projetos

[@dpwoficial]

CSS FTW o/

[@sidneydeus2541]

Muito bom. Já vou começar a aplicar nos meus projetos.

[@dpwoficial]

Graaande Sid! Será que dá para aplicar em certos projetos por aí...? ;)

[@murilofujita]

Sensacional. Este é o Mister M do CSS que revela os truques que todos querem descobrir como é feito!

[@dpwoficial]

🥸

[@thia_haze]

Massa demais!

[@dpwoficial]

o/

[@MarcosPelaezwd]

Fantástico! Muito Bom!

[@dpwoficial]

Muito obrigado! 😃

[@dotjorgedev]

Só lembrando que isso é experimental, segundo o MDN não é suportado no Firefox, Safari nem em nenhum navegador mobile a não ser o Chrome

[@dpwoficial]

Coloquei no comentário fixado a questão de crossbrowser. Só lembrando que não ter amplo suporte é diferente de ser experimental.

[@marciomrb]

só precisam ficar de olho, alguns navegadores ainda não suportam (firefox, safari) por exemplo..

[@dpwoficial]

Firefox com flag funciona; Safari (AKA "o novo IE") ainda não.

[@raffavnunes]

Vídeo muito top!!! Estou rindo a toa com essa atualização do CSS. Não vejo a hora de ver os outros vídeos com as outras propriedades. Show demais!!! Parabéns!!!

[@dpwoficial]

CSS tá demaaais

[@conradotravassos]

Muito top! Parabéns por trazer esse conteúdo interessantíssimo!

[@dpwoficial]

Eu que agradeço pelo comentário, Conrado. 👍

[@caiosantosvargas]

Aleluia RS agora sim o negócio vai ficar bom

[@dpwoficial]

O que já era bom agora ficou melhor! :)

[@filipealexandre2353]

Top demaaaais! Ótimo vídeo, obrigado pelo conteúdo.

[@dpwoficial]

Tamos ae, vlwww

[@TrinoAlexandre]

Demais!!!! Valeu pela informação!!!

[@dpwoficial]

vlwww

[@iridium-x7i]

cara parabéns pelo conteúdo.

[@dpwoficial]

Muito obrigado!

[@matheuscanuto6306]

Muito obrigado pelo vídeo!

[@dpwoficial]

Eu que agradeço, Matheus!

[@nelclassico]

Que vídeo bom, ótima didática, ótimo conteúdo.

[@dpwoficial]

Muito obrigado.

[@MegaLeoDOM]

Thanks!

[@dpwoficial]

Aeee! Brigado eu! o/

[@DanielRios549]

Isso ai é bruxaria, kkk. CSS a cada dia fica mais inacreditável. Uma dúvida: Se eu usar essas propriedades e o browser não suportar, eu imagino que a animação simplesmente não vai acontecer, correto?

[@dpwoficial]

"CSS a cada dia fica mais inacreditável"

[@DanielRios549]

@@dpwoficialSó considerei, vou implementar isso em um projeto hoje pra ver como que fica, eu vi no can I use que o animation-timelime no Safari não funciona e no Firefox só com um flag

[@dpwoficial]

@@DanielRios549Exatamente. Esqueci de colocar o Can I Use no vídeo, mas tá assim mesmo.

[@fbezsw]

Maravilhoso! Muito obrigado pela explicação

[@dpwoficial]

Disponha!

[@andersonfernando5288]

Que conteúdo foda, obrigado por dividir conhecimento, 🤩

[@dpwoficial]

Eu que agradeço por você ter visualizado, Anderson. vlwww

[@matheusmczvieira]

Massa D+ você é um monstro

[@dpwoficial]

Ainda chego lá. :) Obrigado pela participação, Matheus.

[@jennifermagpantay7933]

Video SENSACIONAL!!! Parabens e muito obrigada sempre por compartilhar!!!

[@dpwoficial]

Eu que agradeço suas participações, Jennifer!

[@uicodeoficial]

Que novidade incrível!! Parabéns pelo conteúdo, muito bom mesmo. Acho que já podemos dizer que o css é uma linguagem de programação, hein! hahahaha

[@dpwoficial]

Rapaz... Tô pensando sobre isso há tempos já... Quando eu chegar a uma conclusão, farei um vídeo com minhas considerações.

[@uicodeoficial]

@@dpwoficial aguardo por esse vídeo hahaha

[@charlesmontilla]

Muito bom, me lembro que entre 2012 e 2016 eu fazia coisas bobas com css, tipo bordas arredondadas, transparências, media queries etc, e ficava encantado. Hoje vejo que o CSS evoluiu muito, acredito que em um futuro próximo vai deixar de ser um Linguagem de estilo para se tornar uma linguagem de programação, e, se possível que tome o lugar o JavaScript rsrsrsr...

[@dpwoficial]

Borda arredondada e transparência já considero luxo. Se eu te falar como isso era feito antigamente, você chora. x) Se CSS deixar de ser uma linguagem de estilo, deixa de ser CSS. Agora, que ela está incorporando elementos de programação, isso está. Vai ter um monte de vídeo no canal com altas novidades de CSS, fica ligado. 🧐

[@charlesmontilla]

@@dpwoficial Ah eu me lembro, eu fazia bordas arredondadas com imagens png feitas no FireWorks.

[@dpwoficial]

@@charlesmontilla hahaha Então você também é das antiga. x)

[@rnfdesing]

​@@charlesmontilla agora sim... me senti representado! xD 😅 Parabéns pelo canal ... Excelente conteúdo!

[@pedrodaniluz]

Cara que vídeo incrível. Parabéns pelo trabalho!

[@dpwoficial]

Eu que agradeço demais pela força, Pedro! \o/

[@MarcosOliveira-pn8xm]

Que top, muito obrigado!

[@dpwoficial]

Disponha!

[@thisanx]

Sensacional!!! O conteúdo que tu traz é mto bom!!!

[@dpwoficial]

Muito obrigado! 😁

[@fxduarte]

Excelente vídeo! Pra essa feature ser perfeita, só tendo uma forma de não fazer a animação após o scroll, como nas bibliotecas JS.

[@dpwoficial]

Pensei nisso também. Às vezes tem alguma maneira e/ou eles vão implementar no futuro.

[@marinho-n2j]

Valeu cada segundo que fiquei no video

[@dpwoficial]

:D

[@toirder]

salvou meu projeto, te amo.

[@dpwoficial]

[@brunoarrm]

Meu Deus, tô morrendo pra aprender GSAP e tu vem com essa 😂 parabéns e obrigado!

[@dpwoficial]

haha GSAP tem coisas que no CSS nativo (ainda) não tem; vale a pena aprender sim. Mas, com certeza, Scroll-driven Animations vai dispensar bastante o uso dele e de outras libs JS. :)

[@gilsonconceicao5201]

Obrigado. Bom conteúdo

[@dpwoficial]

Obrigado.

[@heraclitothiago]

Dica maravilhosa

[@dpwoficial]

Que bom que gostou. :)

[@ThallesVFS]

Parabéns!

[@dpwoficial]

Obrigado!

[@felipesantos0687]

Show, belo vídeo!

[@dpwoficial]

Obrigado 👍

[@marcuspeixoto1089]

Muito grato!! Like.

[@dpwoficial]

Disponha!

[@marlinho206]

Ficou top! poderia fazer mais vídeos sobre animação com scroll-driven animation e explicação dos parametros tbm

[@dpwoficial]

Boa! Vamos colocar na fila um vídeo explicando com mais detalhes cada parm. Obrigado pela sugestão, Marlon.

[@marlinho206]

Cara, te vejo como Kevin Powell, só que brasileiro kkkk@@dpwoficial

[@dpwoficial]

@@marlinho206 Que isso, jovi... Ainda chego lá. :D

[@AlexLupoz]

Meu deus... há 15 anos atrás nunca imaginei que o CSS chegaria nesse vídeo. Antigamente tinha que usar imagem dentro de tabela pra fazer borda arredondada, atualmente a cada ano sai cada coisa maravilhosa. Essa é de longe uma das melhores atualizações da década 😍

[@dpwoficial]

Ahh, bom ver um dev das antiga aparecendo. ;) Com certeza, o CSS vai ficar cada vez mais impressionante!

[@AlexLupoz]

@@dpwoficial sim hehe comecei a cursar em 2007 e nunca imaginei que viraria profissão, nem PC eu tinha (e fui ter só anos depois). E inclusive eu estudei muito com vocês (DPW). Agradeço por fazerem parte do meu desenvolvimento 🙌

[@dpwoficial]

@@AlexLupoz Opa, aí sim! Muito obrigado por estar com a gente todo esse tempo!

[@AlexLupoz]

@@dpwoficial tmj 🙌

[@dpwoficial]

@@AlexLupoz 👊

[@lucascavalcante8411]

Top demais 👍🏻

[@dpwoficial]

vlwww

[@gabrielmarcolinosilva7268]

que coisa mais incrivel

[@dpwoficial]

😁

[@gabrielbrandao2481]

O CSS está se tornando uma máquina

[@dpwoficial]

Ele vence, vence e vence. E só.

[@xpeugames]

♥ Muito Bom! ♥

[@dpwoficial]

vlwww

[@LaughLoopPSP]

ja ate me inscrevi

[@dpwoficial]

Brigadasso! o/

[@gutobarbieri]

Muito bom. ❤

[@dpwoficial]

vlwww

[@nihnandra]

Esse vídeo me ajudou muito

[@dpwoficial]

Satisfação em saber. :)

[@digitandoalgo7926]

Da pra fazer uns scroll personalizados bem massa viu

[@dpwoficial]

Né?

[@zmurilo19]

legal demais isso

[@dpwoficial]

Né? :D

[@eduardonascimento9646]

Achei show, as gostaria que a animação fosse executado em condição única, como naquele exemplo que você deu da tela, se chegar em uma determinada porcentagem da minha View a animação ser executada apenas uma vez, você tem algum vídeo falando sobre? Grato

[@dpwoficial]

Com essa tecnologia, ainda não descobri como faz isso. =/

[@arozendojr]

Vou estudar mais as animações usando css, vou fazer seu mini curso, acho muito bonito tem como fazer teste unitário em animações usando css ?

[@dpwoficial]

Estuda sim, é uma área muito interessante e bastante divertida no front. :) Já vi de relance alguma coisa sobre testar animações com Jasmine ou Mocha; de cabeça, não lembro.

[@Ninha-vb1qm]

Nosssss....que loko!

[@dpwoficial]

Por demais!

[@DevBraziI]

Isso já tinha já po, mas ótima explicação toop s2

[@dpwoficial]

É mesmo? E tinha desde quando?

[@DevBraziI]

​@@dpwoficial qual a diferença desse pro efeito paralax? Nesse caso o que seria novo seria o comando no css, né? Mas, esse comportamento já havia visto em outros sistemas...

[@dpwoficial]

@@DevBraziI Um elemento ser animado pela posição do scroll não tem nada a ver com parallax -- que é a movimentação de "planos" diferentes em velocidades diferentes para criar uma ilusão de profundidade em 2D.

[@DevBraziI]

desculpa minha ignorancia... mas, como assim em velocidadas diferentes? parallax seria mais especifico pra mudança de seções? porque ultilizando paralax também tem como ativar animações não é?@@dpwoficial

[@dpwoficial]

@@DevBraziI Olha isso, perceba que elementos que estão em planos diferentes se movem em velocidades diferentes. Isso é parallax. codepen.io/WildKING543/pen/zYevmdg Mas perceba que é possível haver animações de scroll sem esse efeito, com cada elemento sendo transicionado de maneira independente, sem correlação, na mesma velocidade etc.

[@douglasmatos2134]

Eu gostei muito, porem queria uma forma de manter o objeto na tela após finalizar. Creio que da para manipular com js para parar a animação.

[@dpwoficial]

Dá uma olhada em: - developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline - developer.mozilla.org/en-US/docs/Web/API/ViewTimeline Mas, dependendo da necessidade, talvez seja mais prático rumar para alguma lib mesmo.

[@joegrandao]

Caramba que massa. Duvida básica: Ao utilizar esses recursos, não existe o problema de compatibilidade com navegadores mais antigos? O que acontece com a execução desse código em um navegador mais antigo?

[@dpwoficial]

Existe esse problema, sim. Navegador que não der suporte, simplesmente, não vai funcionar. Por isso é interessante, ao desenvolver um site/app, ter noção do range de compatibilidade de versões para decidir quais tecnologias usar ou não, se vai ter fallback etc.

[@franciscowillam2411]

Tu usa o Visual Studio Code?

[@dpwoficial]

Sim, mas, no vídeo, foi direto no CodePen.

Caiu um cisco no olho agora!

[@dpwoficial]

:')

[@ChrisG59]

Não entendi muito bem a diferença entre os dois (view e scroll). Na teoria o view era pra ser animado somente quando entrar na viewport correta e permanecer lá, independente de retroceder ou não a rolagem da página (fazendo apenas a animação da entrada do viewport), certo? Mas as duas funções parecem fazer a mesma coisa.

[@dpwoficial]

- view(): posição do elemento - scroll(): rolagem da página

[@DSV_ELITE]

Como você fez aquele backgroud-image de início virar um cabelhalho fixo ao dar Scroll??

[@dpwoficial]

É um dos exemplos do quê é possível fazer com Scroll-driven Animations. Tem na descrição do vídeo o link do site com muitos outros.

[@mhcostapimenta]

Qual a compabtibilidade com os navegadores atuais?

[@dpwoficial]

No momento, funciona nos principais navegadores (Firefox com flag), menos no Safari (AKA "o novo IE").

[@JTSS69]

Tenho o Firefox atualizado e não vejo os exemplos a funcionar no Codepen, alguma sugestão para mim?

[@dpwoficial]

No momento, o suporte para Firefox é somente com flag. Confira no comentário fixado o link para um polyfill.

[@Flotita5]

Eu tentei fazer um negocio parecido, e única opção que encontrei foi JS, algo que deu muito mais serviço!!!

[@dpwoficial]

Existem boas libs JS para isso (tipo as que foram mostradas no começo do vídeo), mas faz todo o sentido isso ser serviço de CSS, né, porque é algo relacionado a estilo/visual.

[@ph......0]

Realmente uma facilidade enorme, porém ainda não é bem suportado pelos navegadores modernos, acredito que teremos que esperar 1 ano por ai antes de poder utilizar essa feature.

[@dpwoficial]

Depende do projeto. Eu já vou usar agora. :)

[@gustavoquinalha4029]

sinistro

[@dpwoficial]

\m/

[@VidaDeEctomorfoOficial]

Ainda não funciona em algumas plataformas pelo que pude observar

[@dpwoficial]

Verdade. Ainda não está 100%.

[@wikanorockstar]

Qual software você usou?

[@dpwoficial]

codepen.io/

[@rafaelnunes8754]

Olá. Estou tentando aplicar o animation-timeline no Wordpress dentro do Elementor, mais não funciona. Sabe me dizer o porque?

[@dpwoficial]

Tem que ver se vai bater as classes dos elementos com as classes que você tá colocando na timeline. Sendo um editor de CSS puro e estando os nomes certinhos, não tem porque não funcionar.

[@rafaelnunes8754]

@@dpwoficial Eu criei as classes personalizadas e mesmo assim não funcionou e também coloquei a classe do elementor e não rolou. Por exemplo, usou a tag h2 para testar, a classe, a classe seguida da tag e nada. Quando fiz um teste dentro do VS Code funcionou perfeitamente.

[@dpwoficial]

@@rafaelnunes8754 Para você ver que é algum erro que tá acontecendo devido às classes do próprio WP. Inspeciona direitinho nas DevTools que com certeza tem boi na linha.

[@patricksantos6800]

Já tá compatível ??

[@dpwoficial]

Na data de hoje: Chrome, Opera e Edge OK; Firefox sob flag; o novo IE (Safari) sem suporte.

[@yuri4dev]

Safari sempre atrasado

[@yayaygoat]

Ahhahaha. Já ia perguntar sobre o safari. Lembro de experiências negativas com clip path.

[@dpwoficial]

@@yuri4dev Famoso "novo IE".

[@dpwoficial]

@@yayaygoat 😅

[@michelsouza3868]

ô mestre, quanto tempo! me diga uma coisa, aquela conversa de pedir para o gerente de projeto lhe enviar e-mails ainda pode? kkkkkkk.

[@dpwoficial]

Refresque minha memória... 🤔

[@michelsouza3868]

@@dpwoficial o seu livro mestre hahah

[@dpwoficial]

@@michelsouza3868 hahaha Rapaaaz... O sujeito não conhece o próprio livro. 😅

[@fabioverlaine7274]

SHOW... MAS JÁ É NATIVO DO CSS ?

[@dpwoficial]

É nativo, pow. A intenção do vídeo é mostrar que é nativo -- embora ainda não tenha 100% em todos os browsers.

[@nakamacomtibia]

mano que programa voce usa? não e o vs code

[@dpwoficial]

Uso também, mas, no vídeo, foi direto no CodePen.

[@fabiobrasileiroo]

.c-indicator { bottom: 0; animation: scroll 1ms ease-in-out; animation-timeline: scroll(root); /* background-color: rgb(156 163 175); */ transform-origin: left; height: var(--scroll-height); inset: 0; position: fixed; z-index: 20; } @keyframes scroll { from { scale: 0 1; } to { scale: 1 1; } } como consigo fazer funcionar no firefox e outros navegadores aqui so funcionar no chrome

[@dpwoficial]

O suporte ainda não é total. No momento, não funciona nativo no FF e Safari (se não me engano).

[@denisbessa-tx1dv]

Não funciona ainda no Safari :(

[@dpwoficial]

:(

[@tiagoamaral8823]

Com todo respeito, mas estão tentando deixar o CSS flexivel igual a uma linguagem de programação e isso faz ele ficar inchado, não vejo a hora que o CSS morrer e os estilos começarem a ser feitos em uma linguagem de programação de verdade, como o JS...

[@dpwoficial]

Que isso, jovi...

[@fpskkkk]

Bom mesmo era quando vc precisava colocar uma imagem pra tabela ter bordas arredondadas né okkkk

[@dpwoficial]

@@fpskkkk A gente era feliz e não sabia...

[@colli3105]

Para de ser chato mlk

[@tiagoamaral8823]

@@colli3105 então tá, deixa os cara adicionar um milhão de recursos que seriam desnecessários se o CSS fosse acoplado no JS