Hi @MHGRAFIKDESIGN 
For your case, I would create 2 custom interactions:
#1 For “When Page Starts Loading”: showing green overlay with logo;
#2 For “When Page Finishes Loading”: a complex animation where at the first steps be play “hide preloader” animation (like as your current transition-intro) + overlay opacity to 0 and after, set for .transition-wrapper element display: none > next steps is play hero elements appears animation (custom, not as current where you used default Webflow animations like as “Scroll into view - Slide in from Right”
I hope I explained the process clearly, but if not, feel free to ask a question)