On-Scroll Shape Morph Animations

Scroll-driven shape morph animations with tilt interaction inspired by the effect seen on KPR.

I really love KPR’s website. It offers a super cool scrolling experience with lots of impressive visuals. In particular, I was struck by the shape animations powered by Three.js. This inspired me with an idea for an animation that I would like to share with you today. It’s nothing particularly special, just some shape morphing with the ability to switch an image. All of this occurs on scroll, so there’s a lot of action going on.

The way the morph is achieved, is by animating a clip-path on the image and, in case we switch the image, toggle a visibility class to show the next picture.

There are also some letter animations on scroll to complement the shape morph.

Applying a clip-path shape, we create a fake 3D look. We can also animate the image inside, add filters or transforms.

It’s also interesting to animate from a smaller shape to a bigger one. In this case, to fullscreen:

Hope you enjoy this little experiment! Thanks for checking by!

If you want to support our work and get bi-weekly frontend news and inspiration right in your inbox, consider subscribing to our newsletter, the Collective!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!