Playful Interaction for Draggable Elements
by Manoela Ilic
A little playful interaction idea where we add some bounciness to a draggable element and animate it depending on its position.
+ morePlayground
The Playground features web experiments, concepts, and layouts that push the boundaries of traditional design and showcase the latest in animation techniques.
Card Expansion Effect with SVG clipPath
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.
+ more
Color Extraction Effect
by Manoela Ilic
A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js.
+ more
Image Tilt Effect
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.
+ more
Inspiration for Text Styles and Hover Effects
by Manoela Ilic
A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.
+ more
Photography Website Concept
by Manoela Ilic
A photography-inspired website layout with an expanding stack slider and a background image tilt effect.
+ more
Interactive Drag and Drop Coloring Concept
by Manoela Ilic
A little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette.
+ more
Grid Item Animation Layout
by Manoela Ilic
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content.
+ more
Creative Gooey Effects
by Lucas Bebber
A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components.
+ more
Inspiration for Button Styles and Effects
by Manoela Ilic
A collection of fresh button styles and effects for your inspiration. We use CSS transitions and pseudo-elements for most of the effects.
+ more
Subtle Click Feedback Effects
by Manoela Ilic
A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements.
+ more
Some Ideas for Checkout Effects
by Manoela Ilic
Some fun effect and layout ideas for the first step of a checkout process in an online store. We are using the morphing buttons concept together with CSS transforms and transitions.
+ more
Inspiration for Text Input Effects
by Manoela Ilic
Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements.
+ more
Elastic SVG Elements
by Manoela Ilic
Some inspiration for elastic components with SVG shape animations for enhanced UI interactions.
+ more
Inspiration for Dialog Effects
by Manoela Ilic
A small collection of dialog effects using CSS animations for your inspiration. Some effects use SVG animations of morphing paths with the help of Snap.svg.
+ more
Perspective Mockup Slideshow
by Manoela Ilic
An animated perspective mockup slideshow with 3D transforms based on the computations made with the help of Franklin Ta’s script.
+ more
Drag and Drop Interaction Ideas
by Manoela Ilic
Some ideas for drag and drop interactions in a UI. The idea is to show a droppable area that stands for certain actions after an element is being dragged.
+ more
Simple Morphing Search
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.
+ more