Hi everyone,
I’ve followed the animation set up upon loading by Tim Ricks (this one specifically, https://www.youtube.com/watch?v=zTLWgLFfdJ0) and I cannot figure out why mine’s not working. Instead of a fade out, it simply jumps straight into the full screen page. It’s as if it’s not reading opacity animation from 100% to 0% and only animates the display to none.
Any thoughts on this would be greatly appreciated!
Here is my public share link: [LINK](Webflow - Ian Chalk Architects)
(how to access public share link)
Hi there!
To create a smooth page loader fade-out effect, you’ll need to configure the animation in the Interactions panel (found in the right sidebar of the Designer). Here’s how to set it up:
- Open the Interactions panel and navigate to the Timed Actions section
- Select Hide/Show from the dropdown and set the Display property to “none”
- In the timeline at 0.00 seconds, add an Opacity animation
- Set the Opacity value to 0% and adjust the Duration to 1.5 seconds to create the fade-out effect
These settings will make your page loader smoothly fade out and then completely remove it from the page layout. Test the animation in preview mode and adjust the duration value if needed to achieve your desired timing.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
I found the solution - instead of animating the parent, I changed the target to the container divs inside the parent. It all works well now!