You’re not really missing anything - you’re just approaching it from the wrong perspective. To better understand, just remember that there can only be one type of animation applied to an object - it’s either a one-time animation upon initial load, or it’s a scroll animation that is triggered by the user through scrolling.
The best way to handle this is have two identical objects that overlap one another. One object is set to fade in on page load whilst the second object fades into view when scrolling - effectively covering the first object as scrolling begins. It’s not particularly difficult to do, but you will most likely have to play around with timing and scroll positions to get a good effect.