Greensock

Make them Move!

Playing with Greensock

Às vezes eu escrevo...

willianjusten.com.br

Às vezes eu faço código open source...

github.com/willianjusten

E também faço cursos online!

willianjusten.com.br/cursos

Alguns lugares que já trabalhei...

Jobs

Há muito tempo...

Jack Doyle criou o Greensock Flash em 2006

Steve Jobs ajuda a enterrar o Flash em 2010

Criação do GSAP JS

Por que usar GSAP?

See the Pen GreenSock Home Page Animation by GreenSock (@GreenSock) on CodePen.

"Legal...
Mas nunca ouvi falar"

"Isso aí é só site conceitual"

Programador inventando desculpa

Cases de sucesso

waaark.com
cuberto.com
jetlag.photos

"Olha esse site que legal"

Algum designer pedindo

Não vai dar para fazer não...

Vamos aprender Greensock

Partes do GSAP

TweenMax.to(target, time, { properties })

See the Pen TweenMax.to() by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

TweenMax.from(target, time, { properties })

See the Pen TweenMax.from() by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

TweenMax.staggerFrom(target, time, {properties}, stagger)

See the Pen TweenMax.staggerFrom() and TweenMax.staggerTo() by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

TweenMax.staggerFromTo(target, time, {from}, {to}, stagger)

See the Pen TweenMax.staggerFromTo() by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

Exemplo em interfaces

See the Pen gifIe by GreenSock (@GreenSock) on CodePen.

By Greensock

cycle: {}

See the Pen Cycle by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

Tudo junto!

See the Pen SplitText with stagger and cycle by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

Timeline

var tl = new TimelineMax()

See the Pen TimelineMax() by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

TimeLineMax Methods

  • play()
  • pause()
  • reverse()
  • resume()
  • restart()

TimeLineMax Methods()

See the Pen TimelineMax methods by Willian Justen de Vasconcellos (@willianjusten) on CodePen.

Veja mais exemplos

See the Pen I DESIGN WITH CODE ❤ by Chris Gannon (@chrisgannon) on CodePen.

http://codepen.io/chrisgannon

Links

Obrigado

bit.ly/gsap-bh