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
Follow Me