Sachu
(Sachu)
July 7, 2020, 12:10pm
1
Hello, Webflower’s
Hope you guys are doing well, I need to add a skeleton loading effect for the cards present in the website could anyone help me achieve this effect.
Link to the webflow site: https://preview.webflow.com/preview/skeletoneffect?utm_medium=preview_link&utm_source=designer&utm_content=skeletoneffect&preview=16d3b1cadfaabe13689bd5e968e028dc&mode=preview
Thanks in advance
Sachu
Here is my site Read-Only: LINK
(how to share your site Read-Only link )
2 Likes
hi @Sachu is not that hard, the only issue is going to be the timing and the amount of elements. Try following the next steps:
Create the skeleton with only divs, inside a container under the name skeleton
Place it in absolute position on top of the cards with a z-index of 1000
Go to interactions → page triggers and select load page.
The animation needs to show the skeleton until the page is fully loaded.
The exit animation should be to reduce the opacity to 0% and after that hide the element. (This way you will have a smooth exit )
Test it and play with the timing or delays .
Hope this helps!
Cheer,
1 Like
Sachu
(Sachu)
July 8, 2020, 12:25pm
3
@Carlos_Ruiz_Del_Vizo Thank you for taking out your time to reply
Of course, let me know if it works!
For anyone else here - just made a very easy way to implement skeleton screens! Check this out
1 Like