Hello,
I have a page load animation that basically drops letters from the top of the screen, but it does not work for some reason. Can anyone help me with this? It’s been really frustrating trying to find the problem.
Here is my public share link: Readonly Link
You’ve Scroll trigger animation on the same elements as well. So it is overtaking page load animation.
I’d suggest it would be best if you separate them, keep a separate page loading div and keep those element inside. You can use same classes so it won’t be complex to maintain.
Also for page loading animation, you should have actions for both position. When page starts loading and When page finishes loading because your loading animation should start as the page loads. Currently you only have it on end.
Hi abirana,
Thanks for the reply and suggestions. I made a full version of this website like 3 days ago and it works fine there. Here is the ReadOnly Link. You can get rid of everything in this new link so your navigator looks like below which is almost identical to the original link. Then add a 200vh height to the body element so it is scrollable. The page load and hero section scroll animations are exactly the same as before, but this one works.
Oh thanks for clear out that for me as well.
So actually the issue is because you’ve applied Set as initial state on those actions on Scroll animations, remove that.
And on Page load animation is where you should apply Set as initial state
Please check yourself on your last example. And when you are applying same animation like in the image below, you can target them with there common class name, so you don’t have to create so many actions.
Thanks. Removing the set as initial state in the original link plus adding some When page starts loading animation kind of solves the problem, but I still don’t understand why the second link works. I have them set as initial state in the second link as well and I don’t have a When page starts loading there either
Please check your working example, you’ve Set as initial state applied on the Page load animation, which is working good.
But on the other one, you have it applied on the While scrolling in view animation so it is not working. Please notice I’m talking about two different animations.
I don’t think I have Set as initial state applied on While scrolling in view. For While scrolling in view, we have keyframe percentages, Set as initial state is not an option. Do you mean 0%?
Hi there, i have a similar problem. Ive added elements to existing page load animations. Everything works in the preview, but it doesnt work, when i preview the fully site. Is there anybody, who could have a look?
You guys should share your read-only link and only we can see the issue.
@Akbar_bakhshi your read-only link is not working now, if you want me to check again please share that.
Hi, I am having an issue related to a page loader animation. Due to the recent activity on this post and the title, I thought it would be appropriate to post it here. I am implementing a loading animation on my page, and while it works, it does not function as expected. A page loader is supposed to load before the page, but in my case, my page loads and then 5 milliseconds later, my animation loads. This is not ideal, and the page loader is not fulfilling its purpose. I have tried various methods. My setup is as follows: a Lottie animation over the “page content” with display none, position fixed at the top of all content, z-index 9999, width 100%, height 100vh. The interaction is set to page trigger, page load, when page starts loading, a hide/show to display the Lottie, opacity for the duration of the animation, and finally a hide/show to hide the Lottie. The initial hide/show is set as the initial state. I do not understand why the animation does not show first, and I would love to fix this. Here is the link to the live page: www.innovatexstud.io
Thanks.
