Na era da IA, agora todo site parece igual.

@sujeitoprogramador

36.8K followers · usually 2.2K views a post

Views

36.6K

Likes

2.8K

Comments

8

Shares

284

Selling · Other Product

ScrollMagic and GSAP

Why it worked

The video provides high-value, actionable technical advice that solves a common pain point for web developers, while using visually engaging examples to demonstrate the result.

Summary

The creator demonstrates how to use the ScrollMagic and GSAP libraries to create professional, scroll-triggered animations on websites. He showcases examples of these animations on a burger shop website to illustrate how they can make a site stand out.

Structure

1Identify the problem of generic AI-generated sites
2Showcase examples of custom scroll animations
3Introduce ScrollMagic as the first tool
4Introduce GSAP as the second tool
5Explain how the tools work together

Product placement

ScrollMagic and GSAP are the primary subjects of the video, demonstrated through screen recordings of code and website implementations.

Call to action

já dá dois toque na tela aí para me agradecer depois

On-screen text

Animações profissional no seu site scrollmagic GSAP

Original caption

Criar site com animação profissional com IA 🏆 . . #programador #fullstack #ia #developer #fullstack

More from @sujeitoprogramador

Their other posts in the index, biggest breakout first.

Transcript

Na era da IA, agora todo site parece igual. Vou te mostrar como que as bibliotecas que eu utilizo para criar animações como essa, conforme você faz o scroll aqui, vai acontecendo as coisas na página, ou como esse aqui da hamburgueria que eu criei aqui como exemplo. Você faz aqui o scroll, vai acontecendo as animações e eventos na página conforme o scroll. Então isso é sensacional para você criar sites que não pareçam com IA e sites bem profissionais. Então já dá dois toque na tela aí para me agradecer depois. E a primeira biblioteca que eu utilizo é o ScrollMagic. O ScrollMagic, conforme eu faço o scroll, ó, eu consigo criar esses eventos de scroll, de controlar o motion aqui da página, ou, por exemplo, igual eu criei aqui. Conforme eu faço o scroll, o hambúrguer continua na página, vai descendo, aqui ele vai abrindo enquanto vai preenchendo aqui, eu continuo com ele aqui. E a segunda, não menos importante, é o GSAP, né? O GSAP também a gente consegue controlar o scroll e também fazer o scroll trigger que a gente chama. Então, por exemplo, aqui da hamburgueria, eu utilizei nessa parte aqui. Então, conforme eu faço o scroll, o hambúrguer chegou aqui, mas começa a rolar outra parte aqui do projeto, ó. E aí, também o hambúrguer vai sumindo. Então, tudo isso, ó, eu faço usando o GSAP junto com o ScrollMagic.