Animated Background Headers
By Rachel Smith on
A collection of animated background header effects for your inspiration. We use Canvas and Javascript to create an animated background for large site headers.
animation
Page Preloading Effect
By Mary Lou on
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.
Fullscreen Form Interface
By Mary Lou on
An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields.
Notification Styles Inspiration
By Mary Lou on
Some simple ideas and effects for unobtrusive website notifications. A little script is employed for showcasing some styles and CSS animations are used for the effec
How to Create a Tiled Background Slideshow
By Mary Lou on
A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim
Recreating the “Design Samsung” Grid Loading Effect
By Mary Lou on
A tutorial on how to achieve the grid loading effect seen on the "Design Samsung" site. The effect will show a colored element sliding in first and then sliding out
Freebie: Flat Style Squared Preloaders (GIF, AEP, PNG)
By PixelBuddha on
A set of really nice and modern animated GIF preloaders by PixelBuddha. The colorful set comes with seven unique square style activity indicators in three sizes and
Page Loading Effects
By Mary Lou on
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 get
Inspiration for Item Transitions
By Mary Lou on
Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product i
Tilted Content Slideshow
By Mary Lou on
A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations.
SVG Drawing Animation
By Mary Lou on
A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them.
SVG Icons FTW
By Oleg Solomka on
Despite the growing popularity of SVG, its time around and excellent browser support, we have a lack of good vector icon approaches. It's time to fill this gap and u
Animated SVG Icons with Snap.svg
By Mary Lou on
Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons
Animations for Thumbnail Grids
By Mary Lou on
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 eff
Animated Checkboxes and Radio Buttons with SVG
By Mary Lou on
By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide t
Animated Border Menus
By Mary Lou on
A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps.
Creative Loading Effects
By Mary Lou on
Some ideas and inspiration for loading effects on a website.
Loading Effects for Grid Items with CSS Animations
By Mary Lou on
Some inspiration for loading effects of grid items using CSS animations.