/greensock-course

Files to my course about Greensock on Udemy

Primary LanguageHTML

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)