Welcome to the first episode of Motion Study! Watch as I dive into a motion graphics example, discuss what I find intriguing, and encourage you to create it yourself! In this episode I will reveal my new Motion Study animated logo which incorporates the very effect we will be studying. Watch the Show About this...Read More

So I’m working on an intro animation for my Motion Study web series and figured I’d just share my process and let you get involved. The video below explains a bit of how it all works. Although this isn’t an official episode of Motion Study it actually represents what it will be like: I’ll explore...Read More

Okedokee, It’s been a long run but we’re finally here! The video below walks you through my solution to the challenge and a few others. Thanks so much to the Keyframers, Jhey, Mamboleoo, MotionHarvest and everyone else that went along for the ride. I started this challenge based on the premise that I didn’t think...Read More

So far the client demands have been a little annoying but reasonable. We saw that the GreenSock Animation Platform made initial setup and revisions a breeze. CSS Animations and WAAPI, although a bit more cumbersome (in my humble and extremely biased opinion), rose to the challenge and got the job done. Good job, all! Although...Read More

We’re back. Let’s see how folks did with the client’s annoying changes. Watch the video review Keyframers in action It was great to have the challenge featured on the Keyframer’s live-stream. David and Stephen did a fantastic job making quick work of the challenge and it was fun chatting with everyone. Watch the Keyframer’s tackle...Read More

It’s time for Round 2. The client loves what you did, but as always, there are some minor additions. Let’s see how you do! Round 2 Instructions Reference Animation Instructions Make these changes to your Challenge 1 file: fade in the graph element for 2 seconds prior to the other animations have the green element...Read More

So happy that some folks are going on this journey with me. I’ve had contestants use: GSAP, CSS Animations, CSS Animations with scoped variables, and ZIM! Watch the video for results and my reaction Summary I proposed that CSS Animations and WAAPI weren’t well suited for basic animation sequences. I was expecting a firestorm, but...Read More

It’s been nearly 10 years since Steve Jobs killed Flash and the web industry had to scramble for “standards-based” animation solutions. To fill the void we’ve seen the rise of: CSS Animations and Transitions Web Animations API (WAAPI) GreenSock Animation Platform (GSAP) A plethora of JavaScript utilities that favor small file size over features If...Read More

An elastic ease can be configured with amplitude and frequency values to give you an incredibly wide range of effects. Watch the Video (bonus tip at the end) The elastic ease can be configured with 2 parameters: amplitude: affects the strength of the overshoot frequency: affects the the width of the wiggles. A smaller frequency...Read More

In this video I am going to demonstrate how I built my Timeline Visualizer that I used in my Position Parameter video from GSAP 3 Express. The secret sauce all comes from the timeline.getChildren() method which allows you to get an array of all child tweens and timelines from a timeline. We can then set...Read More