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%?
