In Playground, by Manoela Ilic
A proof-of-concept effect recreation of the animation seen in a prototype app by Marcus Eckert. The idea is to flip a grid item in 3D, expand it to fullscreen and reveal some associated content. We’ve created two demos with a vertical and a horizontal rotation.
In Tutorials, by Manoela Ilic
A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations.
In Playground, by Manoela Ilic
A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.
In Playground, by Manoela Ilic
A “look inside” book preview with BookBlock. A concept for book showcases or online book stores that shows a grid of books with the options to view the details and to look inside of the book, opening the BookBlock in fullscreen and allowing for a 3D page navigation.
In Playground, by Manoela Ilic
Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects.
In Playground, by Manoela Ilic
A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.
In Tutorials, by Diego Pardo
A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann’s Open Type project and it’s a very creative way to display and play with letters.
In Playground, by Manoela Ilic
There are many parts of a website where we can apply nice transitions to make things more interesting. Images are certainly great entities for playing with fancy effects and today we’d like to show you some inspiration for thumbnail effects using CSS animations.
In Playground, by Manoela Ilic
Some inspiration for transition effects for off-canvas navigations.
In Tutorials, by Nick Pettit
A tutorial about a technique that uses box shadows for creating a realistic shading effect on simple objects.
In Playground, by Manoela Ilic
A fancy 3D effect for a mobile app showcase where the app screens animate to a layered stack.
In Playground, by Manoela Ilic
Some inspiration for headers that animate when scrolling the page.
In Playground, by Marco Barria
A creative way to show interactive books using CSS 3D Transforms.
In Playground, by Manoela Ilic
A set of experimental modal window appearance effects with CSS transitions and animations.
In Tutorials, by Manoela Ilic
A tutorial on how to create some subtle and modern caption hover effects.
In Articles, by Manoela Ilic
The content flip plugin BookBlock has been updated and improved. Content can be flipped vertically and horizontally, and we’ve added support for RTL among other things.
In Blueprints, by Manoela Ilic
A responsive product grid layout with some UI details for inspiration.
In Playground, by Manoela Ilic
A showcase collection of various page transition effects using CSS animations.
