So - on a front page, on load, a background image fades in, and a logo fades in slightly delayed like .6 seconds. It all reaches 100% opacity and stays.
Now - on scroll - I want the background and logo to fade out, fairly quick, and other icons and text to fade into a partially overlapping area. The new objects stay in place and the page just scrolls normally on down from here (maybe a parallax section lower down but that works fine already).
I cannot seem to apply the fade in, and a scroll animation to fade out, at the same time. Either one works on its own. So if I set up the fade-in for the logo, it works, but as soon as I go to the on-scroll animation options, the fade-in stops working.
What am I missing?
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.
OK thanks - that’s actually what I ended up doing but it seemed awkward. Thought there must be a better way. Non-identical actually, used a white box to fade to white. It works.