willianjusten / Greensock Course

Curso de Greensock

Aqui ficam os arquivos do curso de Greensock que foi desenvolvido por: Willian Justen e Guilherme Louro

Site

Você pode ver todos os projetos no ar no Site de Exemplos.

Ementa

• Introdução
  • Introdução (04:49)
  • Por que usar? (02:29)
  • Como usar? (05:24)
  • Estrutura de arquivos e dinâmica do curso (03:40)
• Basics
  • Método set() (06:41)
  • Método to() (03:04)
  • Método from() (03:45)
  • Método fromTo() (03:49)
  • Delay (03:35)
  • Easings (04:29)
  • Método staggerTo() (04:17)
  • Método staggerFrom() (02:47)
  • Método staggerFromTo() (02:54)
  • Cycle (06:09)
  • Loops (04:15)
  • Callbacks (08:20)
• Timelines
  • Encadeando animações com a timeline (06:41)
  • Controlando ordem de animação com position parameter (08:48)
  • Métodos de controle da Timeline (04:54)
  • Mudando a velocidade com timeScale (03:37)
• Loaders
  • Loader balls com stagger (09:13)
  • Loader square-ball (09:57)
  • Loader Circle (SVG) (07:35)
  • Loader draw lines (SVG) (06:16)
  • Ícones em SVG (16:44)
• Trabalhando com Polyart
  • Animando um urso polar poligonal e criando um mini-joguinho de avinhação (10:22)
  • Animando polígonos em direção randômicas (08:11)
• Animando um SVG com vários elementos
  • Criando a estrutura do SVG e seletores (05:05)
  • Criando a animação crua (09:38)
  • Controlando a aceleração e tempo da animação (07:56)
  • Refatorando a animação (07:22)
• Criando um Modal com diferentes animações
  • Criando a estrutura do modal (01:04)
  • Criando o efeito de Fade In (03:04)
  • Criando a função de fechar o modal (01:42)
  • Criando o efeito de Fade In Scale (04:47)
  • Criando o efeito de Slide in (03:22)
  • Criando o efeito de Fullscreen (04:22)
  • Limpando as propriedades com clearProps (03:05)
• Criando um Slider do zero
  • Mostrando o slider final (00:40)
  • Criando a estrutura html (02:59)
  • Criando o CSS - parte 1 (05:05)
  • Criando o CSS - parte 2 (04:01)
  • Criando as setas de controle (05:47)
  • Iniciando a animação de entrada do slider (07:11)
  • Refatorando o código da animação (03:30)
  • Criando a animação de saída do slider (03:12)
  • Fazendo o controle das setas e detalhes finais (10:58)