Design

On-Scroll Shape Morph Animations | Codrops

[ad_1]

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!

[ad_2]

Source link

Show More

admin

Makes Noise is a blog where you can find all the juicy details on a variety of topics including health and fitness, technology, lifestyle, entertainment, love and relationships, beauty and makeup, sports and so much more. The blog is updated regularly to make sure you have all the latest and greatest information on the topics that matter most to you.

Related Articles

Back to top button
Close