Expanding Grid Item Animation
In Playground, by Manoela Ilic
A grid item animation where the thumbnail scales up when the details view is opened. Based on the Dribbble shot “Surf Project” by Filip Slováček.
page-transition
Organic SVG Shape Morph Ideas
In Playground, by Manoela Ilic
A small set of ideas for organic shape effects. The demos show some ways to use animated SVG morphs interactively on a website, including a menu hover and a content reveal effect.
Morphing Page Transition
In Playground, by Manoela Ilic
A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.
Developer/Designer Page Layout Concept
In Playground, by Manoela Ilic
An experimental page layout concept with a developer/designer theme and a special image reveal effect.
Expanding Bar Navigation Concept
In Playground, by Manoela Ilic
An experimental tab-like navigation concept where a content area is opened with an animation once an item is clicked.
First Person Sunglasses Try-On Experiment
In Playground, by Manoela Ilic
A fun “try-on” experiment that shows a first person view through the colored lenses of sunglasses, mimicking the movement of putting them on and off.
Cubes Advent Calendar
In Playground, by Manoela Ilic
A 3D cubes Advent calendar with fun hover effects and background color animations. Clicking the boxes opens another content level with different element animations.
Transition Effect with CSS Masks
In Tutorials, by Robin Delaporte
A tutorial on how to use CSS Masks to create some interesting looking slide transitions. Highly experimental!
Above & Beneath: Featured Content Layout Effect
In Playground, by Manoela Ilic
A landing page template with a featured content section and background sounds that change according to the view.
Multi-Layer Page Reveal Effects
In Tutorials, by Manoela Ilic
A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration.
Effect Ideas for Image Grids
In Playground, by Manoela Ilic
Some inspiration for effects on image grids. The ideas include animations on the opening grid item, the disappearance of the grid and the resulting view.
Zoom Slider
In Blueprints, by Manoela Ilic
A simple content slider with depth-like zoom functionality for a predefined area in each slide.
Card Expansion Effect with SVG clipPath
In Playground, by Claudio Calautti
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.
Photography Website Concept
In Playground, by Manoela Ilic
A photography-inspired website layout with an expanding stack slider and a background image tilt effect.
Grid Item Animation Layout
In Playground, by Manoela Ilic
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.
Sliding Header Layout
In Tutorials, by Manoela Ilic
A tutorial on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid.
Simple Morphing Search
In Playground, by Manoela Ilic
A simple effect idea for a search input that morphs into a fullscreen overlay. The idea is to enlarge the search input and show some relevant content or search results.
Page Preloading Effect
In Tutorials, by Manoela Ilic
A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs.
