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 »
Some fun Terminal-like character hover animations for lines of text. If you haven’t seen Jean Dawson’s incredible website yet, I recommend you to check it out! It was made by Mouthwash and Guillaume Colombel and it looks like a 1985 VHS tape was brought to life! As an 80s kid, I have a soft spot
Hover Animations for Terminal-like Typography Read More »
In the ever-changing world of web design, trends may shift rapidly, but a good font can provide lasting relevance. This article highlights some beautiful fonts that always manage to look awesome, no matter what year it is. These are a few of my personal favorites—by no means a complete list, and I’ve intentionally steered clear
A Selection of Fonts That Future-Proof Your Web Design Read More »
Some interesting experiments have been shared lately on X showing progressive blurs on all kinds of elements and this one by Rauno caught my eye: It’s a stunning effect and I was wondering if something similar could be achieved by simply “unblurring” text while we scroll. I want to share these results with you today,
Blurry Text Reveal on Scroll Read More »
Some ideas for scroll-based text highlight animations. Today I’d love to share some text highlight effects that have been whirling in my mind for a while. They are inspired by some details I saw in Dribbble shots and some other videos. The idea is to highlight text, particularly words, on scroll, when they come into
Some On-Scroll Text Highlight Animations Read More »
An animation experiment where we expand an image within some typographic element on scroll. Today I’d like to share a little effect with you that got inspired by this video of a billboard ad: A video expands and pushes some text away. I thought this would be fun to experiment with and try out different
On-Scroll Expanding Image Animation within Typography Read More »
In this tutorial, we’ll explore how to generate a engaging bulge effect on text using React Three Fiber. For the past few weeks, I’ve been experimenting with mixing 3D and 2D to create compelling effects. Today, I’ll guide you through replicating this bulge effect on text. To streamline the process and maintain a structured approach
Creating an Interactive 3D Bulge Text Effect with React Three Fiber Read More »
You may have come across those design elements with knockout “text”, revealing an image or pattern behind it. Sometimes, it doesn’t even look like text, but more like shapes: Or like the one seen on the website of Newfolk. I find that these elements can really contribute a nice dynamic touch to a design. I
Experimental On-Scroll Text Animations with SVG Clip-Path Read More »
Today, I’d like to share a small text effect with you. It’s inspired by an effect visible on the Academy website, featuring a number that appears to be broken into segments or sliced up, pulled apart, and then brought back together. This effect seems to be an animation created with Lottie, utilizing clip-path animations on
On-Scroll Sliced Text Animation Read More »
Some inspiration for transitioning text blocks with different word animations. Today I would like to share a couple of simple text animation ideas with you that I have been playing with. It’s all about transitioning from one block of text to another, using different kind of animations on the words. They are simple but I
Inspiration for Text Block Transitions Read More »
