From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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 monday.com: The perfect project management tool for designers. If you would like to sponsor one of our demos, find out more here.
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:
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
We hope you enjoy this little effect and find it useful!
References and Credits
- Based on the artwork “Gradient Topography” by Diana Hlevnjak
- Anime.js by Julian Garnier
- Charming by Yuan Qing
As always very inspiring and very impressive. Thank you.
Excellent as always!!! One little UX thing that has caught me out a lot with your demos is the previous demo arrow icon. I don’t know about everybody else but I always subconsciously hit that expecting to go back to the article. I know the drop icon does that but it just seems to me that the arrow icon would be the more logical choice. I know this is just a little thing but I will admit that I’ve found it irksome when it’s caught me out. Anyway, love what you guys do, keep up the amazing work of making the web a better place!
Awesome work! T am so glad that my artwork inspired you to create this! Thank you so much for sharing!
Great, as always awesome work.
It’s awesome work , but how we can use arabian fonts in this case?
aweee insane ! great work !!
This is by far the most awesome Page i have ever seen. Absolute eye-candy.
Very beautiful work … that I’ve used on my little web site … respect and love !
Very nice work and I want to implement these in my sites, but I am not able to do this. As I need to make few modifications like adding text inside a bubble and then I also need to change positions of the bubble.
I have checked that svg is used for this:
Each layer of a bubble is a tag and “d” attribute I think is the position of static bubble and when clicked on its respective text then bubble’s effect’s values are taken from pathdata:id.
As I need to make modifications, so I have no choice other than creating a different svg for that, and in that I am getting values for d attribute, but not for pathdata:id. I am not able to calculate values for pathdata:id attribute. So my effect is getting distorted.
Please let me know how can I make modifications in this.