On-Scroll 3D Carousel
In Playground, by Manoela Ilic
An animation concept where we rotate a carousel in 3D while scrolling.
page transition
175 posts
Animating in Frames: Repeating Image Transition
In Playground, by Manoela Ilic
A playful exploration of animating repeated image frames along a path, inspired by Joana Correia’s motion design reel.
Hover Motion Intro Animation
In Playground, by Manoela Ilic
A little hover motion effect on a grid and an intro animation.
Making CSS View Transitions Easy with Velvette
In Tutorials, by Noam Rosenthal
Learn how to effortlessly implement smooth CSS view-transitions with Velvette, a useful library designed to tackle common challenges and enhance user experiences in web applications.
Image Layer Animations with Clip-Path
In Playground, by Manoela Ilic
Some ideas for speedy page transition animations with layered images using clip-path.
Animating Multi-Page Navigations with Browser View Transitions and Astro
In Tutorials, by Igor Penaque
A beginner-friendly guide that walks you through the use of the Browser View Transitions API with Astro for a smoother navigation experience.
Some Ideas for Fullscreen Image Slideshow Animations
In Playground, by Manoela Ilic
A collection of ideas for slideshow animations on fullscreen images.
Ideas for Grid to Slideshow Switch Animations
In Playground, by Manoela Ilic
Some ideas and inspiration for layout animations where we go from an irregular grid to a slideshow or alternative view.
Image Tiles Menu Animation
In Playground, by Manoela Ilic
An animation featuring image tiles that transform into a full image when a menu item is clicked.
Ideas for Pixel Page Transitions
In Playground, by Manoela Ilic
Inspiration for “pixel” page transitions based on Niccolò Miranda’s animation.
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.
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.
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.
Image To Grid Transition
In Playground, by Manoela Ilic
A simple transition where a large image animates to its place in a grid.
