Fullscreen Scrolling Slideshow
In Playground, by Manoela Ilic
A fullscreen scroll-based slideshow with a content view powered by GreenSock’s Observer plugin.
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.
Large Image to Content Page Transition
In Playground, by Manoela Ilic
A simple scroll effect and page transition inspired by Vitalii Burhonskyi’s Dribbble shot.
Tiny Grid Layout Animation
In Playground, by Manoela Ilic
A simple layout transition where a small grid animates to a larger view, using the Flip plugin from GreenSock.
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.
Make Way Grid Effect
In Playground, by Manoela Ilic
A little grid interaction effect where adjoining items make way to a selected one that expands.
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.
Scroll Animation Ideas for Image Grids
In Playground, by Manoela Ilic
Some ideas for animations on images in a grid when scrolling a page.
Image To Grid Transition
In Playground, by Manoela Ilic
A simple transition where a large image animates to its place in a grid.
Stack to Content Layout Transition
In Playground, by Manoela Ilic
An experimental layout transition where a stack of images animates to a gallery view, showing some more content.
On-Scroll Text Repetition Animation
In Playground, by Manoela Ilic
An on-scroll animation that shows repeated fragments of a big text as seen on the website of Dr. Dabber.
Lines to Content Layout Animation
In Playground, by Manoela Ilic
A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content.
Expanding Rounded Menu Animation
In Playground, by Manoela Ilic
An expanding menu animation with a cover unreveal effect in the background.
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.
Kinetic Typography Page Transition
In Playground, by Manoela Ilic
A concept for a kinetic typography based page transition where background letters come into the foreground and reveal a new content level.
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.
