🎨 GSAP Course - Projeto de Animações

Baseado no projeto: JS Mastery Video Kit

Um projeto moderno de animações web desenvolvido com React, TypeScript, Vite e GSAP (GreenSock Animation Platform).

📋 Sobre o Projeto

Este projeto demonstra o uso avançado do GSAP para criar animações fluidas e interativas em aplicações web modernas. O projeto inclui:

• Animações com ScrollTrigger: Animações baseadas no scroll da página
• SplitText: Animações de texto com divisão de caracteres
• Interface responsiva: Design adaptável para diferentes dispositivos
• Assets ricos: Imagens e elementos visuais para demonstração

🚀 Tecnologias Utilizadas

• React 19.1.0 - Biblioteca JavaScript para interfaces de usuário
• TypeScript 5.8.3 - Superset do JavaScript com tipagem estática
• Vite 7.0.4 - Build tool rápida e moderna
• GSAP 3.13.0 - Biblioteca de animações profissionais
• Tailwind CSS 4.1.11 - Framework CSS utilitário
• React Responsive - Hooks para design responsivo

📦 Plugins GSAP Configurados

• ScrollTrigger: Animações baseadas no scroll
• SplitText: Animações avançadas de texto

🛠️ Instalação e Configuração

Pré-requisitos

• Node.js (versão 18 ou superior)
• npm ou yarn

Passos para instalação

1. Clone o repositório

   git clone [URL_DO_REPOSITORIO]
   cd GSAP-Course

2. Instale as dependências

   npm install
   # ou
   yarn install

3. Execute o servidor de desenvolvimento

   npm run dev
   # ou
   yarn dev

4. Acesse o projeto

   • Abra seu navegador e vá para http://localhost:5173

📁 Estrutura do Projeto

GSAP-Course/
├── public/
│   ├── images/          # Assets de imagens
│   ├── videos/          # Arquivos de vídeo
│   └── fonts/           # Fontes personalizadas
├── src/
│   ├── App.tsx          # Componente principal
│   ├── main.tsx         # Ponto de entrada
│   └── assets/          # Assets do React
├── package.json         # Dependências e scripts
└── vite.config.ts       # Configuração do Vite

🎯 Scripts Disponíveis

• npm run dev - Inicia o servidor de desenvolvimento
• npm run build - Gera build de produção
• npm run preview - Visualiza o build de produção
• npm run lint - Executa o linter ESLint

🎨 Recursos de Animação

ScrollTrigger

Animações que são ativadas conforme o usuário faz scroll na página.

SplitText

Animações de texto que dividem o conteúdo em caracteres individuais para efeitos visuais únicos.

Exemplo de Uso

import gsap from 'gsap';
import { ScrollTrigger, SplitText } from "gsap/all";

// Registra os plugins
gsap.registerPlugin(ScrollTrigger, SplitText);

// Animação básica
gsap.to('.elemento', {
  duration: 1,
  x: 100,
  ease: "power2.out"
});

📱 Responsividade

O projeto utiliza React Responsive para criar experiências adaptáveis em diferentes dispositivos:

• Desktop: Animações completas
• Tablet: Animações otimizadas
• Mobile: Animações simplificadas

🔧 Configuração Avançada

TypeScript

Configuração completa do TypeScript para desenvolvimento seguro:

• tsconfig.json - Configuração principal
• tsconfig.app.json - Configuração da aplicação
• tsconfig.node.json - Configuração do Node.js

📞 Suporte

Se você encontrar algum problema ou tiver dúvidas:

1. Verifique a documentação do GSAP
2. Abra uma issue no repositório
3. Consulte a documentação do React e TypeScript

🎓 Aprendizado

Este projeto é ideal para aprender:

• Animações web avançadas com GSAP
• React com TypeScript
• Build tools modernos (Vite)
• Design responsivo
• Boas práticas de desenvolvimento

---

Desenvolvido utilizando React, TypeScript e GSAP