Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 5.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Animation

Aprenda a criar sites animados com Greensock

Aprenda tudo que você precisa para começar a criar incríveis animações na Web.
Highest Rated
Rating: 4.5 out of 54.5 (178 ratings)
1,026 students
Created by Willian Justen de Vasconcellos, Guilherme Louro
Last updated 9/2020
Portuguese
30-Day Money-Back Guarantee

What you'll learn

  • Como funciona a API do Greensock
  • Como controlar animações com Timelines
  • Como criar loaders simples em poucas linhas
  • Como fazer efeitos inimagináveis só com CSS
  • Como animar ícones em SVG
  • Como criar animações complexas com SVG
  • Como criar componentes reutilizáveis
  • Como criar um Modal com diferentes animações
  • Como criar um Slider do zero

Course content

9 sections • 57 lectures • 5h 29m total length

  • Preview04:49
  • Preview02:29
  • Como usar?
    05:24
  • Estrutura de arquivos e dinâmica do curso
    03:40

  • 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

  • Preview06: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

  • Preview09:13
  • Loader square-ball
    09:57
  • Loader Circle (SVG)
    07:35
  • Loader draw lines (SVG)
    06:16
  • Ícones em SVG
    16:44

  • Animando um urso polar poligonal e criando um mini-joguinho de adivinhação
    10:22
  • Animando polígonos em direção randômicas
    08:11

  • 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 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

  • 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

  • Basics
    04:35
  • Bloqueando eixos de movimentação
    03:29
  • Definindo fronteiras para o drag
    02:03
  • Criando resistências
    04:01
  • Criando callbacks
    04:46
  • Criando um jogo para montar seu próprio homem cabeça de batata
    04:47
  • Criando um quebra-cabeça animado
    09:35
  • Criando um slider de preço
    13:00
  • Entendendo o hitBox movendo pastas
    11:38
  • Criando um slider de antes/depois
    14:24

Requirements

  • Conhecimentos básicos de Html/CSS/JS (mas fique tranquilo, tudo será explicado)
  • Editor de Texto (VSCode recomendado)

Description

O curso aborda a v2 do Greensock e atualmente ele está na v3. As diferenças são bem pequenas, mas é importante se atentar a isso. Todos os exemplos na versão 3 estão disponíveis no Github do curso também!

O curso tem como objetivo passar desde os conceitos básicos do Greensock até os conceitos mais avançados, permitindo criar basicamente qualquer animação para o seu site/app. O curso é desenvolvido em pequenos módulos com vídeos curtos, facilitando assim o aprendizado e o desenvolvimento do aluno, visando sempre uma didática simples, concisa e bastante aplicada a prática de trabalho.

Existem alguns projetos ao decorrer do curso, para aplicarmos os conceitos aprendidos, fazendo com que o aluno perceba sua evolução e também comece a trabalhar mais em sua parte criativa e com código.

Who this course is for:

  • Desenvolvedores que desejam criar sites mais interativos
  • Designers que desejam dar mais vida a suas criações de um jeito fácil
  • Quem deseja se atualizar no mercado de trabalho e sair na frente.

Instructors

Willian Justen de Vasconcellos
Engenheiro de Software
Willian Justen de Vasconcellos
  • 4.7 Instructor Rating
  • 32,550 Reviews
  • 210,532 Students
  • 8 Courses

Olá, eu sou Willian Justen. Sou Engenheiro de Software com anos experiência, já tendo trabalhado em grandes empresas como Toptal, Globo, HUGE, Queremos/WeDemand entre outras. Sempre focando na qualidade e melhor entrega para o usuário. Escrevo bastante no meu blog, falando sobre SVG, CSS, JS e minhas experiências como desenvolvedor.

Guilherme Louro
Software Engineer
Guilherme Louro
  • 4.9 Instructor Rating
  • 928 Reviews
  • 2,823 Students
  • 2 Courses

Olá, eu sou Guilherme Louro, trabalho como Engenheiro de Software e tenho mais de 10 anos de experiência na área de desenvolvimento. Já tendo trabalhado com Flex, Flash, PHP, Javascript e Python. E hoje, trabalho boa parte do tempo com React, Redux, no Frontend e com Python e Node no Backend, além de várias outras tecnologias atuais.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.