Sliced Dual Image Layout

Today we’d like to share some layouts with a sliced image look with you. The idea is to show some text elements in a grid layout and change the content and images in a slideshow fashion. For the background image slices, we created a little plugin that has a couple of additonal options. For making…

Details

Liquid Distortion Effects

Today we’d like to share an interesting distortion effect with you. The main concept of this demo is to use a displacement map in order to distort an underlying image, giving it different types of effects. To demonstrate the liquid-like transitions between images, we’ve created a slideshow. What a displacement map generally does, is using…

Details

Dynamic Shape Overlays with SVG

Today we’d like to share another way of achieving morphing page transitions. This time, we’ll generate multiple SVG curves with JavaScript, making many different looking shapes possible. By controlling the individual coordinates of the several layers of SVG paths, the curved shapes animate to a rectangle (the overlay) with a gooey motion. We use some…

Details

Collective #357

Inspirational Website of the Week: A friend of mine Innovative details and some awesome organic shape morphs make this site our pick this week. Get inspired This content is sponsored via Syndicate Ads There IS a better way to manage Apple devices… Jamf Now is a mobile device management solution for iPad, iPhone and Mac…

Details

Collective #356

Our Sponsor Project management is better when it’s visual Dapulse is the next generation of visual tools, built specifically for designers and developers. See what everyone on your team is working on in a single glance. Check it out Experiments in Creative Coding Some fantastic coding experiments by Luke Twyman. Check it out Building A…

Details

Collective #355

Inspirational Website of the Week: Peter Van Alphen An interesting navigation with lots of attention to detail. Our pick this week. Get inspired Our Sponsor Project management is better when it’s visual Dapulse is the next generation of visual tools, built specifically for designers and developers. Check it out CSS Grid Challenge: Winners and Templates…

Details

Collective #354

Our Sponsor Project management tools are obsolete Dapulse is the next generation of visual tools, built for designers and developers. See what everyone on your team is working on in a single glance. Check it out Teachable machine A Google A.I. Experiment where you can teach a machine using your camera. View the GitHub repo…

Details

Collective #353

Inspirational Website of the Week: Badass An actually fun to scroll site with an interesting skew effect. Our pick this week. Get inspired This content is sponsored via Syndicate Ads Earn your MS in Information Design and Strategy Learn to master the space where data meets story in Northwestern’s online master’s in Information Design and…

Details

Collective #352

Our Sponsor Project management is better when it’s visual Dapulse is the next generation of visual tools, built specifically for designers and developers. Check it out Short Trip Short Trip is an implementation of Alexander Perrin’s collection of interactive illustrations created for the web. Check it out Nested Symbols & Auto-Updating Styleguides (Sketch) Jan Loserts…

Details