Animating your Portfolio to Awesome with Greensock 

@mJordanCodes

by

Jordan Brady

Hi! I'm Jordan

Twitter / Github / Instagram / Codepen

@mJordanCodes

email: hi@mJordan.codes

website: mJordan.codes

I love to nerd about anything CSS, Animations, my puppies, and Gatsby. Find me online and let's chat?

Slides: bit.ly/greensock-slides

Code Examples: bit.ly/GSAP-examples

All my talk slides: mjordan.codes/speaking

A Couple Nifty Links

Why?

@mJordanCodes

- Material Design documents

@mJordanCodes

Motion guides user attention in a smooth, unbroken fashion. When a UI changes appearance, motion provides continuity between the placement and appearance of elements before and after a transition...

@mJordanCodes
  • Relationships / Hierarchy
  • Cause and Effect
  • Feedback
  • Guide Users

Benefits of Motion

@mJordanCodes

Motion helps make a UI expressive and easy to use...

- Material Design documents

Your portfolio is one of the only sites that you will build that is a complete creative expression of yourself with no constraints...

- Ali Spittel: Building a Kickass Portfolio

@mJordanCodes

When?

  Now that we have the why....

@mJordanCodes

a few things to keep in mind...

  • Less is more
  • Animations should have a clear purpose
  • Inform / Communicate
  • Draw Attention
  • Appear modern, up-to-date, polished
  • Delight
@mJordanCodes

  Now that we have the why and the when....

How?

@mJordanCodes

Style Calculations

Layout

Composite

Paint

How do browsers render style?

@mJordanCodes

Modern browsers can animate four things cheaply...

- High Performance Animations

  • Position         transform: translate(npx, npx);

  • Scale             transform: scale(n);

  • Rotation         transform: rotate(ndeg);

  • Opacity          opacity: 0...1;

CSS

  • Possible to animate transitions from one CSS configuration to another
  • Easy for simple one-shot transitions
  • Impossible to animate all the parts of the transform property in a distinct way

JavaScript*

  • Good for multi-step, advanced animations
  • Gives you more control
  • Solves SVG cross-browser woes.
  • Plugins for fancy things
@mJordanCodes

CSS or JavaScript?

*Specifically Greensock
@mJordanCodes

A quick intro to CSS animations

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

Animation Properties

  • Defines the appearance of the animation
  • to & from  or % to define steps

@keyframes

@mJordanCodes

And finally... GreenSock

GSAP: GreenSock Animation Platform

*You can try all the plugins for free on CodePen

TweenLite

  • Foundation of GSAP
  • Handles "tweening" 1 or more properties of any object over time.

 

 

TimelineLite

  • Provides a simple way to create complex sequences of groups of tweens that you can control as a whole.

tweenLite docs

timelineLite docs

@mJordanCodes

TweenLite

@mJordanCodes
const box = document.getElementById('box')

document.addEventListener('click', () => {
  TweenLite.to(box, 1, {width: "200px", height: "200px"})
})

codepen

The object you want to change / animate

How many seconds it should take to change

What the properties should look like at the end of the animation

TweenLite

@mJordanCodes

codepen

document.addEventListener('click', () => {
    TweenLite.to('#box', 1, {width: "+=10", height: "+=10"})
})

Note: Just add the  CSSPlugin to be able to animate almost any css-related property

TweenLite

@mJordanCodes
  • TweenLite.to()
  • TweenLite.from()
  • TweenLite.fromTo()
  • TweenLite.set

... and a whole lot more!

TimelineLite

@mJordanCodes
const box = document.getElementById('box')

let tl = new TimelineLite();

tl.to(box, 1, {x:200})
  .to(box, 1, {y:200})
  .to(box, 1, {backgroundColor: "#BADA55"})

codepen

  • Create a new Timeline object
  • Chain a bunch of animations together

TimelineLite

@mJordanCodes
  • tl.play()
  • tl.pause()
  • tl.resume()
  • tl.seek(1.5)
  • tl.reverse()

TimelineLite allows you to control the animation as a whole.

codepen

TimelineLite

@mJordanCodes

codepen

You can also use Position Parameters to make things happen at the same time.

TimelineLite

@mJordanCodes

codepen

tl.staggerTo() allows you to loop through an array of objects and stagger them

Some Plugins if you join the club

@mJordanCodes

But you can play for free on CodePen!

Resources

Class / Tutorial

Book

Awesome People in the Space

Thanks for Listening!

Twitter / Github / Instagram / Codepen

@mJordanCodes

email: hi@mJordan.codes

website: mJordan.codes

Did you know?

I'm available for hire!

Slides: bit.ly/greensock-slides

Code Examples: bit.ly/GSAP-examples

Animating your Portfolio to Awesome with GSAP

By mJordan Brady

Animating your Portfolio to Awesome with GSAP

  • 359
Loading comments...

More from mJordan Brady