How to Code an On-Scroll Folding 3D Cardboard Box Animation with Three.js and GSAP
In Tutorials, by Ksenia Kondrashova
A tutorial on how to create a 3D cardboard box that folds and unfolds on scroll using Three.js and the GSAP ScrollTrigger.
GSAP
Explore our collection of tutorials and articles featuring GSAP (GreenSock Animation Platform). Here, you’ll find in-depth guides, tips, and examples on how to create stunning animations with GSAP, as well as practical ways to implement it in your projects.
How to Create a Cover Page Transition
In Tutorials, by Manoela Ilic
Today we are looking under the hood of a page transition based on Vitalii Burhonskyi’s Dribbble shot.
How to Animate SVG Shapes on Scroll
In Tutorials, by Manoela Ilic
A short tutorial on how to animate SVG paths while smooth scrolling a page.
Building a Scrollable and Draggable Timeline with GSAP
In Tutorials, by Michelle Barker
Learn how to build a scrollable and draggable horizontal timeline using GSAP’s ScrollTrigger and Draggable plugins.
Create an Abstract Image Slideshow with OGL, GLSL, and GSAP
In Tutorials, by Francesco Michelini
Learn how to create a WebGL-powered image slideshow animated using a single value.
Dynamic CSS Masks with Custom Properties and GSAP
In Tutorials, by Michelle Barker
Learn how to animate CSS masks based on the cursor position using GSAP and custom properties for a unique spotlight effect.
Creating a Menu Image Animation on Hover
In Tutorials, by Manoela Ilic
A tutorial on how to create a hover effect for a menu where images appear with an animation on each item.
Making Stagger Reveal Animations for Text
In Tutorials, by Manoela Ilic
A short tutorial on how to recreate a letter stagger animation with GSAP and Splitting.js.
How to Create a Motion Hover Effect for a Background Image Grid
In Tutorials, by Manoela Ilic
A short tutorial on how to achieve a motion hover effect on a background image grid.
Motion Paths – Past, Present and Future
In Tutorials, by Cassie Evans
The ability to animate along a motion path is a really useful thing to have in your SVG animation toolkit. Let’s explore a few ways to achieve this, including the upcoming CSS motion path module and the newly released GSAP3.
The New Features of GSAP 3
In Articles, by Christina Gorton
Learn about all the exciting new features of GSAP 3 in this easy-to-follow overview.
Making Gooey Image Hover Effects with Three.js
In Tutorials, by Arno Di Nunzio
Learn how to create gooey reveal hover effects on images with Three.js using noise within a shader.
How to Create Motion Hover Effects with Image Distortions using Three.js
In Tutorials, by Niccolò Miranda
In this tutorial you will learn how to achieve interesting looking hover effects with image distortions using Three.js.
Custom Cursor Effects
In Tutorials, by Stefan Kaltenegger
A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels.
How to Create an Interactive Animated SVG Drum Kit
In Tutorials, by Josh Ellis
A tutorial on how to create an animated and interactive SVG drum kit with GSAP and jQuery.
How to Create a Fullscreen Video Opening Animation
In Tutorials, by Manoela Ilic
A tutorial on how to create a video opening animation inspired by the effect seen on momentsapp.com.
Creating Material Design Ripple Effects with SVG
In Tutorials, by Dennis Gaebel
An in-depth tutorial on how to build the ripple effect outlined under Google Material Design’s Radial Action specification and combine it with the powers of SVG and GreenSock.
Creating a “Jump Loader” Animation with SVG and GSAP
In Tutorials, by Chris Gannon
Learn how to create a playful “Jump Loader” animation with SVG and GSAP.
