I actually love KPR’s web site. It affords an excellent cool scrolling expertise with plenty of spectacular visuals. Particularly, I used to be struck by the form animations powered by Three.js. This impressed me with an concept for an animation that I want to share with you right this moment. It’s nothing notably particular, just a few form morphing with the power to modify a picture. All of this happens on scroll, so there’s quite a lot of motion happening.
The way in which the morph is achieved, is by animating a clip-path on the picture and, in case we swap the picture, toggle a visibility class to indicate the subsequent image.
There are additionally some letter animations on scroll to enhance the form morph.
Making use of a clip-path form, we create a pretend 3D look. We will additionally animate the picture inside, add filters or transforms.
It’s additionally fascinating to animate from a smaller form to an even bigger one. On this case, to fullscreen:
Hope you take pleasure in this little experiment! Thanks for checking by!
If you wish to assist our work and get bi-weekly frontend information and inspiration proper in your inbox, contemplate subscribing to our publication, the Collective!
