mJordan Brady PRO
I’m mJordan, a creative front end developer. I love learning and sharing what I know with my local Tech Community.
@mJordanCodes
by
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
@mJordanCodes
@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
@mJordanCodes
Motion helps make a UI expressive and easy to use...
Your portfolio is one of the only sites that you will build that is a complete creative expression of yourself with no constraints...
@mJordanCodes
Now that we have the why....
@mJordanCodes
@mJordanCodes
Now that we have the why and the when....
@mJordanCodes
Style Calculations
Layout
Composite
Paint
@mJordanCodes
Modern browsers can animate four things cheaply...
Position transform: translate(npx, npx);
Scale transform: scale(n);
Rotation transform: rotate(ndeg);
Opacity opacity: 0...1;
@mJordanCodes
*Specifically Greensock
@mJordanCodes
animation-name
animation-duration
animation-timing-function
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
@mJordanCodes
GSAP: GreenSock Animation Platform
*You can try all the plugins for free on CodePen
@mJordanCodes
@mJordanCodes
const box = document.getElementById('box')
document.addEventListener('click', () => {
TweenLite.to(box, 1, {width: "200px", height: "200px"})
})
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
@mJordanCodes
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
@mJordanCodes
... and a whole lot more!
@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"})
@mJordanCodes
TimelineLite allows you to control the animation as a whole.
@mJordanCodes
You can also use Position Parameters to make things happen at the same time.
@mJordanCodes
tl.staggerTo() allows you to loop through an array of objects and stagger them
@mJordanCodes
But you can play for free on CodePen!
Class / Tutorial
Book
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
By mJordan Brady
I’m mJordan, a creative front end developer. I love learning and sharing what I know with my local Tech Community.