Category Archives: JavaScript

  • TimelineMax: Getting a Handle on Bézier Tweening

    Plugins for GSAP are great when you need advanced capabilities. The BezierPlugin I’ll be explaining in this tutorial helps animate virtually any property (or properties) along a curved bezier path defined as an array of points/values. Before jumping in we should take a moment to learn what a bezier curve is and where it came from. Read More →

  • Introducing ScrollMagic 2.0

    If you’re desperate to generate beautiful scroll animations in your next project, then look no further. ScrollMagic is a JavaScript library to help you create “magical” scroll interactions which effortlessly react to the user’s current scroll position and trigger animations or synchronized events. Read More →

  • TimelineMax: An Introduction to Tweening

    In the olden days of animation tweening was a term used to describe a frame by frame sequence, or what’s sometimes referred to as “in-betweens.” It’s that place where a single movement leads into the next to create one fluid motion. For those that have gray hair you may recall Flash; an application that used this term when referring to frame movements. Let’s take an insightful look into a few examples and give this tweening thing a good ol’ fashioned college try. Read More →

  • TimelineMax: Understanding the Mechanics

    Ready for some definitions? Mechanics is defined as an area concerned with the behavior of objects subjected to forces or displacements, and the subsequent effects of those objects on their environment. A timeline is a way of displaying a list of events in chronological order, sometimes described as a project artifact. Let’s bridge the two areas in order to learn how to control and configure our animations as if we actually know what we’re doing. Read More →