@igor-ostojic
Posted
WHAT THE HELL !
This is insanely well done....
I am seriously speechless...
Do you maybe have any tutorials / guides on how to achieve that loading animation and the initial dashboard animation ?
Everything is so smooth i can't stop replaying it....
And one more question , since i have just done this challenge, is there any way to animate the changing of content when it is fetched from the JSON file and rendered to the HTML ?
Thank you in advance ! Amazing amazing work once again.
@buneeIsSlo
Posted
@igor-ostojic
Thank you for the kind words, I'm glad you like it.
-
The loading animation is actually quite simple to create. It's an absolutely positioned
divthat covers the entire webpage, and after a delay of 3 seconds, the height of thedivis changed from100%to0%. and the elements inside it have anopacityanimation from1to0. The Dashboard animation follows more or less the same idea, I'm just animating theopacityandscaleof the elements from0to1. -
These effects can be created with plain CSS, however handling the delays and synchronizing gets quite tricky. So using animation libraries like Anime.js or GSAP can be much more helpful. Both libraries have well written and visual documentation.
-
Yes that's totally possible. It's just that I was a bit lazy to implement it. This person's solution has a really interesting to way to achieve it.
Hope this helps :)
