The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js
In Tutorials, by Karim Maaloul
A tutorial that explores the basics of creating animated 3D scenes using Three.js.
3d
Interactive 3D Mall Map
In Playground, by Manoela Ilic
An interactive 3D mall map concept with a sidebar search and pin indicators for every level.
Cinema Seat Preview Experiment
In Playground, by Manoela Ilic
An experimental demo where a 3D perspective preview is shown for a selected seat in a cinema room.
Interactive Room Display
In Playground, by Manoela Ilic
An experimental interactive room slideshow based on the prototype concept by Bilal Mechairia’s Dribbble shot “Spaces”.
Shaded Progress Bars: A CSS/Sass Exercise
In Tutorials, by Rafael González
A tutorial on how to create some interesting 3D progress bars with CSS/Sass. Discover how to use box shadows and gradients to create realistic looking skins.
Playful Interaction for Draggable Elements
In Playground, by Manoela Ilic
A little playful interaction idea where we add some bounciness to a draggable element and animate it depending on its position.
Image Tilt Effect
In Playground, by Manoela Ilic
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.
Perspective Mockup Slideshow
In Playground, by Manoela Ilic
An animated perspective mockup slideshow with 3D transforms based on the computations made with the help of Franklin Ta’s script.
Draggable Dual-View Slideshow
In Playground, by Manoela Ilic
An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.
3D Grid Effect
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.
Tilted Content Slideshow
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.
Scattered Polaroids Gallery
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.
“Look Inside” Book Preview with BookBlock
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.
Perspective Page View 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.
Progress Button Styles
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.
Animated Opening Type
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.
Animations for Thumbnail Grids
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.
Transitions for Off-Canvas Navigations
In Playground, by Manoela Ilic
Some inspiration for transition effects for off-canvas navigations.
