How can I animate text on page load when using a preloader?

Design help Animations & Interactions
1

I’ve built a preloader on our site that animates the hero text once the preloader finishes but he preloader only shows on first visit. So for repeat visitors I’ve set up a second animation for only the hero text.

The problem is the second animation seems to play before the preloader finishes so the hero text appears at 100% opacity. I’ve tried changing the order so hero text starts when page starts loading and the preloader when page finishes loading but nothing seems to do the trick. Any thoughts?

Here is my public share link: LINK
(how to access public share link)

2

Ive managed to make this work by resetting the opacity of the hero text to 0% in the preloader animation. This way if the second animation has already played it won’t appear when the preloader finishes but if a repeat visitor’s browser has already loaded the text it won’t be affected.

Not sure if this is the most elegant way to do it but it worked