This time, I set out to recreate an animation from Motion Highlights #11:

As always, you can scroll down to see it in action, or keep reading for a quick breakdown of my approach.

Using Framer Motion, I animated both the CSS clip-path and rotate properties on a div that wraps around the image. From there, I just needed to apply the same rotation to the child image, but in the reverse direction to keep the image visually "still". It's a straightforward setup, but a visually appealing result! Here is the final output:

Rerun Animation

Photo by Rodrigo Silva on Unsplash

Photo by Evgeni Tcherkasski on Unsplash

Photo by Marko Brečić on Unsplash

Photo by Shutter Speed on Unsplash

Photo by Venti Views on Unsplash

See the code here

Recently, I stumbled upon Codrops' Motion Highlights #10 article and got stuck staring at this animation:

I thought it would be interesting to try recreating it on the web. You can scroll down to see it in action or read more about my approach

Using Framer Motion, I quickly got the basic motion working, moving the letters and background stripes left to right. But there were two tricky things about recreating this animation:

1. Challenge 1: How the backgrounds of the letters separate and combine with each other

   One of the main factors that drew me into wanting to recreate this animation was how the letters visually merge into words and then separate again. As a way of recreating this style, I remembered an old article on css-tricks that I bookmarked a while ago about using SVGs to create The Gooey Effect. This approach successfully recreated the effect, and watching the letters separate and merge felt like a big win!

2. Challenge 2: Layering the letters and background stripes

   In the video the gray backgrounds of the letters sit on top of the yellow stripes, but blend in with the gray stripes.

   Normally, this is a job for z-index, but the issue there is the letter and its gray background needed to live in the same component yet have different stacking contexts. That's a no-go with just CSS.

   In this case, I decided to use a React portal to have a place for the letters to render on top of the stripes and follow their gray background elements one-to-one in motion. This way it looks like they are one component, even though the letter itself is rendered in the portal. I think this is a fun solution - but would love to hear if anyone else has ideas on how to solve this in a different way and make it even cleaner!

To expand upon the idea, I added an input box for you to add your own lines in! For this, I just recalculate the height and width in order to fit the length of the words. While this is only a little experiment I did, I had a lot of fun grabbing a beautiful, random example from the internet and seeing how I would go about recreating it! Try it out below:

See the code here