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.
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.
In Playground by Manoela Ilic
An experimental page layout concept with a developer/designer theme and a special image reveal effect.
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.
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.
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.
In Tutorials by Robin Delaporte
A tutorial on how to use CSS Masks to create some interesting looking slide transitions. Highly experimental!
In Playground by Manoela Ilic
A landing page template with a featured content section and background sounds that change according to the view.
In Tutorials by Manoela Ilic
A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration.
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.
In Blueprints by Manoela Ilic
A simple content slider with depth-like zoom functionality for a predefined area in each slide.
In Playground by Claudio Calautti
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.
In Playground by Manoela Ilic
A photography-inspired website layout with an expanding stack slider and a background image tilt effect.
In Playground by Manoela Ilic
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.
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.
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.
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.
In Playground by Manoela Ilic
Some inspiration for effects applied to title headers of articles with a fullscreen image. The idea is to show some creative transition when continuing to the article body.
In Playground by Manoela Ilic
A set of creative page loading effects that use SVG animations with Snap.svg. The idea is to show an overlay with a interesting shape animation while new content gets loaded.