Rapid Image Layers Animation
In Playground, by Manoela Ilic
A rapid animation of multiple layers of images for intros or page transitions.
page-transition
Creative WebGL Image Transitions
In Playground, by Yuri Artiukh
A set of interesting looking image transitions including distortion and warp effects made with WebGL.
Draggable Menu with Image Grid Previews
In Playground, by Manoela Ilic
A draggable inline menu with a scattered thumbnail preview of an image grid.
Draggable Image Strip
In Playground, by Manoela Ilic
A draggable image strip layout with a content preview powered by Draggabilly and TweenMax.
Animated Image Columns
In Playground, by Manoela Ilic
An experimental web layout where several image columns get animated out when a menu item is clicked.
How to Create and Animate Rotated Overlays
In Tutorials, by Manoela Ilic
A tutorial on how to create and animate rotated overlays, or “reveal” elements, for interesting page transition effects.
Crossroads Slideshow
In Playground, by Manoela Ilic
An experimental slideshow with an inclined look, three slide previews and a content view on click.
Grid Reveal Effects with Anime.js
In Playground, by Manoela Ilic
Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.
Layer Motion Slideshow
In Playground, by Manoela Ilic
A CSS Grid-based slideshow template with a layer motion effect on the main image and title.
Animated Grid Previews
In Playground, by Manoela Ilic
A template where one can switch between little image previews that are scattered around the page. The images animate to a grid once an “explore” link is clicked.
Grid Layout with Scrollable Content View
In Playground, by Manoela Ilic
A Masonry-powered grid layout with a motion hover effect on the grid items and a scrollable content view.
Diagonal Slideshow
In Playground, by Manoela Ilic
A slideshow with a “diagonal” look and three visible slides. A decorative background element expands to fullscreen when opening the content preview.
Motion Reveal Slideshow
In Playground, by Manoela Ilic
A simple image slideshow with a motion reveal effect when navigating between slides and a fullscreen details view.
Full Image Reveal Effect
In Playground, by Manoela Ilic
A simple fullscreen image reveal effect where thumbnails slide out of the viewport to reveal a larger image.
Collapsing Logo Effect
In Playground, by Manoela Ilic
A recreation of the collapsing logo effect seen on PracticalVR. The idea is to have an initial view that animates to a logo in the top left corner of the page.
Grid Layout with Motion Hover Effect and Content Preview
In Playground, by Manoela Ilic
A retro-style grid layout with a playful motion hover effect on the grid items. When clicking on a grid item, a content preview opens.
Slice Revealer
In Playground, by Manoela Ilic
A reveal effect where animated slices cover and uncover an image. Inspired by Zhenya Rynzhuk’s transitions experiments.
Gradient Topography Animation
In Playground, by Manoela Ilic
An organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.
