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!
