Page Loading Effects

View demo Download source If you have visited the brilliantly designed websites of Nicolas Zezuka and Active Theory you might have noticed the slick loading animations that happen before new content is displayed. This kind of loading style is quite trendy lately and we wanted to give you some inspiration. The idea is to animate a shape into the viewport and show an activity indicator. When the new content is loaded, the shape will animate back to reveal the page. We’ll use animated SVGs with Snap.svg for the effects because this allows us to create complex shapes and interesting morphing transitions. Please also note that the examples only serve for your inspiration. We haven’t implemented any fallbacks and we “fake” the dynamic loading of new content. Also note that we are animating SVGs and pseudo-elements which might not work well in some browsers. The way we show the loading overlay is by defining an animation on a path that we define in the following SVG: <div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none"> <path d="M 0,70 80,60 80,80 0,80 0,70"/> </svg> </div><!-- /pageload-overlay --> We define an initial path that is not visible in the viewport inside of the SVG and a opening and closing path in data attributes on the pageload-overlay division. As you can see, we are using a small viewBox but we stretch the drawing to 100% of the window width and height while not preserving the aspect ratio. If we don’t have a closing path defined, we’ll animate back...

Inspiration for Item Transitions

View demo Download source Today we’d like to share some item transition inspiration with you. We tried to keep the idea of the transition general, so we did three different use cases: a small image slideshow, a large header slideshow and a slideshow using product images with a transparent background. These transitions don’t have to be restricted to a slideshow, of course. But to see them in action, this was the best option for a demo. You can surely imagine transitioning from one state to another in many different circumstance (think about scrolling a page, loading items, clicking a button, sending a form, and many many more). A very special case is the usage of (product) images with transparent background. Depending on the item itself, there are many possibilities for transitions that imitate the real-world movement or behavior. A great example in the wild can be found on the brilliant hat presentation section of Optimo Chicago. The slideshow conveys a feeling of throwing a hat into the viewport, transmitting the feeling of lightness and augmenting the viewing experience. This is such an excellent example of how adding the right animations can enhance product browsing and bring it to another level. In our last demo, we give you some simple inspiration using a wine bottle to explore the feeling for heavier objects. For transitioning the state, we are using CSS Animations. This allows us to specify a certain behavior for the items when coming from any direction. This can be useful for direction-aware navigation of items, like you can see in the demos. One of the transitions that can be...

Simple Stack Effects

View demo Download source Today we’d like to share some inspiration for simple stack effects with you. You have certainly seen these kind of effects, mostly used in image galleries, but also on single items on a page: one item is shown initially and then, with some trigger, more items are revealed, normally as decoration. One can imagine a couple of triggers for these effects: item hover, on load, on scroll and on click effects. When using some subtle, but creative moves, we can make some interesting effects that elevate a static design. Note that for some of the effects we use perspective and 3D transforms so they will only work in modern browsers. The beautiful illustrations are by Isaac Montemayor. Check out his Dribbble profile, he’s an awesome illustrator. The markup is the following: <figure class="stack stack-sidegrid"> <img src="img/1.png" alt="img01"/> <img src="img/3.png" alt="img03"/> <img src="img/4.png" alt="img04"/> <img src="img/2.png" alt="img02"/> </figure> We use a figure with three or four images. All images, except for the last one, will be absolute: .stack { margin: 20px auto; width: 400px; padding: 0; position: relative; max-width: 100%; } .stack img { max-width: 100%; position: absolute; top: 0; left: 0; transition: all 0.3s; } .stack img:last-child { position: relative; } Setting one of the images to position relative will give our parent figure a height. An example effect is the following: /* Bouncy Grid */ .stack-bouncygrid.active img { transform: scale(0.48); } .stack-bouncygrid.active img:nth-child(4) { transform-origin: 0 0; } .stack-bouncygrid.active img:nth-child(3) { transform-origin: 100% 0; } .stack-bouncygrid.active img:nth-child(2) { transform-origin: 0 100%; } .stack-bouncygrid.active img:first-child { transform-origin: 100% 100%; } This effect moves the items...