Loader animation
Hello @Web Bae & @everyone, I am trying to create a loader animation that I have gotten in a Figma file but it is not happening smoothly for some reason. And also The nav interaction is not happening properly Please can anyone help me with that. Also I want to match the animation with figma in the live site
Figma link:-https://www.figma.com/proto/zq8wh1YTi9iajriZ95nCuf/Al-Fikree?type=design&node-id=116-794&t=Vm0f6kr1tzgKqCyh-1&scaling=min-zoom&page-id=116%3A2&starting-point-node-id=116%3A1890&mode=design
Read only link:-https://preview.webflow.com/preview/al-fikree?utm_medium=preview_link&utm_source=designer&utm_content=al-fikree&preview=256ec6dc454782b6679f4b4c6a2aece4&workflow=preview
Live:-https://al-fikree.webflow.io/al-fikree-construction
6 Replies
Hi @Purv your Underline element has visibility: hidden in the setting panel
you should use the styles panel (display none and/or opacity) to control visibility when working with interactions.
for your preloader to work, you need a page load animation trigger, which I don't see at the moment.
I have added the interaction on the body tag @Web Bae can you have a look there
I have a gotten a basic interaction setup but I am not able match the smoothness of the Figma design
you have logo-loader duration set to 0 seconds
that will help with the logo
you'll need to play with delay, duration, and eases to try and match the figma animation
Thank you I will try to play around as you said