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 up to date with the latest web design and development news and relevant updates from Codrops.