Shows tagged Animation

Headshot of Cassie Evans
Cassie Evans

Smooth Scrolling with GSAP!

Cassie Evans joins us to show us how to add smooth scrolling to a site in 2022, along with a fun reveal!

Headshot of Amit Sheen
Amit Sheen

Animated Stick Figures with CSS!

CSS wizard Amit is back to show us how he's creating and animating stick figures with just CSS! We'll create a horse together, learning some of his advanced techniques.

Headshot of David Fitzgibbon
David Fitzgibbon

Making a Fish Swim with Three.js!

Once you get 3D models imported to your scene, realistic animations can be tough to achieve. In this episode, we'll learn how to animate objects along a path, by bringing a swimming fish to life!

Headshot of Louis Hoebregts
Louis Hoebregts

Simulating and Animating Fur with Three.js

Louis Hoebregts (Mamboleoo) is back to teach us how to simulate and animate fur on a 3d model! We'll learn how he used simplex noise to make a beautiful neon fox piece with fur that blows in the wind.

Headshot of Ryan LaBar
Ryan LaBar

Beautiful Page Transitions in Next.js

Page transitions make navigating a delightful experience for our users. Ryan will show us how we implement them in our Next.js site!

Headshot of Matt Perry
Matt Perry

Animating with Motion One

We'll learn how to use Motion One, a new, lightweight animation library built on the Web Animations API.

Headshot of Josh W. Comeau
Josh W. Comeau

Building a Whimsical Course Platform

Josh walks us through how he built the platform for his new course, CSS for JavaScript Developers. We'll look into the stack, the decisions he made, and the whimsical animated touches he added!

Headshot of Cassie Evans
Cassie Evans

FLIP Animations with GSAP!

FLIP animations allow us to animate DOM elements in ways that are otherwise impossible! The GSAP FLIP plugin makes these transitions a breeze, and Cassie will teach us how to use it!

Headshot of Lea Rosema
Lea Rosema

Mixing Shaders with GSAP!

Digital Artist Lea is on to show us how to combine the massive power of shaders with the animation ease of GSAP!

Headshot of Amit Sheen
Amit Sheen

Creating and Animating 3D CSS!

CSS Master Amit is back to show us how to create 3D CSS, plus how to add motion, rotation, physics, and so much more, all without JavaScript!

Headshot of Cassie Evans
Cassie Evans

GSAP Community Questions

Cassie is coming on to help breakdown some cool CodePens, and answer whatever GSAP questions you bring!

Headshot of Luis Bizarro
Luis Bizarro

Incredible Effects with Three.js

Luis is a master at making gorgeous interactive experiences, and they'll be showing us how to create something special to go with our SpaceBnB theme!

Headshot of ilithya

Gorgeous Space Shaders

ilithya makes wonderfully fun shaders and 3D creations for the web. She'll join us to build out a space-themed shader!

Headshot of Ryan LaBar
Ryan LaBar

Animating Input Interactions... in Space!

Ryan LaBar will show us how we can take a basic range slider and make it into an incredible experience. Following the theme of SpaceBnB, it's sure to be out of this world.

Headshot of Tom Miller
Tom Miller

Let's Animate a Character on Scroll!

Tom Miller teaches us some wonderful GreenSock scroll techniques! We learn how to animate Godzilla walking on scroll, along with moving the camera and background as you move across the page.

Headshot of Zach Saucier
Zach Saucier

Demolishing Cities with Canvas Particle Effects!

Zach Saucier teaches us how to use the web Canvas API and his own custom library to make images of cities disintegrate! The cool thing is that this technique can be implemented on any DOM element!

Headshot of Andrew Rubin
Andrew Rubin

Animating SVG to Music with GSAP!

Andrew Rubin shows us how to animate SVG to a beat with GSAP and the Web Audio API. Not only did he code and animate this pen, but he created the illustrations and music for this creation, too!

Headshot of Steve Gardner
Steve Gardner

Let's Build a 3D Cheeseburger Drum Kit!

We'll learn Three.js and GreenSock in this episode where Steve teaches us how to turn a Cheeseburger into a Drumkit! We finish with a playable (mostly edible) drumkit that works with mouse or keyboard.

Headshot of Darin Senneff
Darin Senneff

Sharing Deadly Deals with the Share API!

In this episode, Darin Senneff shows us some wonderful character animation tips with GSAP and SVG! Then we connect it all to the Web Share API to give visitors a fun experience when sharing.

Headshot of Ryan Mulligan
Ryan Mulligan

Spinning up a Deal Wheel Component!

Ryan Mulligan will teach us how to create a spinning prize wheel! Using some clever math we're able to spin the wheel and have a character react to the result.

Headshot of Jamie Coulter
Jamie Coulter

Let's Make a Checkbox Powered Slider!

CSS wizard, Jamie Coulter joins us to build a carousel slider entirely with checkbox logic. No JavaScript needed! We even add some wonderful CSS transitions between each slide.

Headshot of Cassie Evans
Cassie Evans

Creating an Animated Castle Builder

Cassie Evans shows us how to use GSAP timelines along with a range slider to get a customizable castle builder. By using an SVG we can get fun bouncy transitions!

Headshot of Adam Kuhn
Adam Kuhn

Reinventing the Signup Form

Adam Kuhn showed us his trick for reimagining what we think of as possible with email forms. Plus we learned a technique for turning form borders into more whimsical shapes on submit!