An organic SVG shape layer animation based on Diana Hlevnjak17;s work 20;Gradient ”. Powered by anime.js.

GradientTopographyAnimation_Featured  - GradientTopographyAnimation Featured 1 - Gradient Topography Animation | Codrops

Today we’d like to share a shape layer animation with you. The inspiration for this effect comes from the fantastic work by Diana Hlevnjak (Polar Vector) “Gradient Topography”. We use anime.js for the animations and Charming for the letter effects.

After seeing the artwork, we thought it would be awesome to animate these kind of gradient layers of an organic shape in an interesting way. For this we’ve created a little layout that has several shapes spread on the page and when a menu item is clicked, the associated shape group will expand to full screen and some content is shown.

The demo is kindly sponsored by The perfect project management tool for designers. If you would like to sponsor one of our demos, find out more here.

Attention: We’re using CSS variables, grid and flexbox for the demos, so please view this with a modern browser.

The organic shapes consist of path layers where each one has the same gradient but a decreasing fill opacity. This creates an interesting look and when animated, fills the entire screen with the semi transparent layers until it’s fully opaque after the last layer enlarges. The other shapes scale down.

Have a look at some screenshots:

GradientTopographyAnimation_01  - GradientTopographyAnimation 01 1 - Gradient Topography Animation | Codrops

GradientTopographyAnimation_02  - GradientTopographyAnimation 02 - Gradient Topography Animation | Codrops

GradientTopographyAnimation_03  - GradientTopographyAnimation 03 - Gradient Topography Animation | Codrops

- advertisement - Gradient Topography Animation | Codrops

We hope you enjoy this little effect and find it useful!

References and Credits


Source link


Please enter your comment!
Please enter your name here