Grid View Switch Animation
In Playground, by Manoela Ilic
A concept for a view switch animation from grid to slideshow.
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.
Ideas for Pixel Page Transitions
In Playground, by Manoela Ilic
Inspiration for “pixel” page transitions based on Niccolò Miranda’s animation.
Turning 3D Models to Voxel Art with Three.js
In Tutorials, by Ksenia Kondrashova
In this detailed tutorial you will learn how to turn 3D models into voxel art with Three.js.
Fullscreen Clip Animation
In Playground, by Manoela Ilic
Some inspiration for clip-path animations where a fullscreen image moves into a row/grid of smaller images, morphing its shape along the way.
Double Image Hover Effects with Clip-Path Animations
In Playground, by Manoela Ilic
Some ideas for hover effects using clip-path animations where the same image gets revealed in a creative way.
Some More On-Scroll Typography Animations
In Playground, by Manoela Ilic
A second set of ideas for on-scroll typography animations.
Bringing Letters to Life: Coding a Kinetic SVG Typography Animation
In Tutorials, by Louis Hoebregts
In this tutorial, you’ll learn how to recreate a captivating motion type effect using SVG and GreenSock.
Crafting a Dice Roller with Three.js and Cannon-es
In Tutorials, by Ksenia Kondrashova
This tutorial will guide you through the process of creating a 3D dice roller using Three.js and Cannon-es.
On-Scroll Typography Animations
In Playground, by Manoela Ilic
Inspiration and ideas for on-scroll typography animations that add an extra layer of creativity to a website design.
Getting Creative with Infinite Loop Scrolling
In Tutorials, by Manoela Ilic
A quick look at how to recreate the infinite loop scrolling animation seen on Bureau DAM with GSAP and Lenis.
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.
Tooltip to Gallery Transition
In Playground, by Manoela Ilic
A concept for page transitions where a tooltip image animates to a gallery layout and fullscreen image.
Inline Layout Switch Ideas
In Playground, by Manoela Ilic
Two ideas for animating images from an inline layout to a column or grid-based one.
Unreveal Effects for Content Previews
In Playground, by Manoela Ilic
Some explorations of page transitions using covering elements and CSS clip-paths.
Smooth Panel Scroll Effects
In Playground, by Manoela Ilic
An exploration of smooth panel scroll effects based on Margot Priolet’s website.
On-Scroll Animation and View Switch
In Playground, by Manoela Ilic
A layout with some scroll animations and a view switch where the content item images animate to a grid.
Menu to Grid Layout Animation
In Playground, by Manoela Ilic
A simple layout animation where the thumbnails of a menu row animate to their position in a content preview grid.
3D Perspective Glitch Hover Effect
In Playground, by Manoela Ilic
A fun hover effect that shows a pixelated image with a glitch animation inspired by the one seen on buōy’s website.
