Sometimes, I forget just how powerful SVG filters can be. Maybe it’s because my mind tries to block out the countless hours I’ve spent wrestling with glitches, performance issues, and other strange browser quirks. But like many aspects of web technology, things have improved a lot! So, when I came across this effect on the […]
Scroll-based SVG Filter Animations on Text Read More »
A little hover motion effect on a grid and an intro animation. I have a real appreciation for websites that incorporate playful interactive visuals; they add a distinctive character to a brand and create an engaging experience for visitors. Recently, I came across sink.design, where they aptly refer to these visuals as “Play.” Just click
Hover Motion Intro Animation Read More »
The other day I stumbled across this demo by Fabio Ottaviani and I was wondering how this animation could work on scroll. The idea of the demo is to animate a mask shape that has a SVG turbulence filter applied to it. Magically, this results in an apparent animation of the the whole distortion around
On-Scroll SVG Filter Effect Read More »
The other day I visited Lorenzo Dal Dasso’s fantastic website and had a lot of fun with the cool cursor effect! Of course I had to try it out and see what crazy stuff I could do with this and after having a peek under the hood, I saw that the wonderful duo @ETStudio5 who
Gooey Cursor Effect Read More »
Some ideas for hover effects using clip-path animations where the same image gets revealed in a creative way. From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today. Today I’d like to share a demo with you that explores how to utilize CSS clip-path to create interesting-looking
Double Image Hover Effects with Clip-Path Animations Read More »
From our sponsor: From online stores to member areas, Squarespace is everything you need to sell anything. From the custom cursor on my portfolio marvinx.com using blurred SVG circles, I created several variations which I would like to share with you today. Without going into too much detail, I’d like to explain some points on
Custom SVG Cursors with an Interactive Emitter Effect Read More »
A simple layout switch example where we go from a typography row view with inline images to a large image preview with more content. From our sponsor: Try Mailchimp today. Today I’d like to share a little layout animation with you. The idea is to switch from a line view to a larger content view
Lines to Content Layout Animation Read More »
An experimental hover effect, where a content preview is shown while a mini map indicates the position of the cursor. From our sponsor: Try Mailchimp today. I find mini maps really exciting. These tiny UI components can give visual feedback on where we are on a page, e.g. what we are hovering or viewing. Sometimes
Hover Preview Effect with Mini Map Read More »
