Nice looking site already.
I’m not entering too much into details about how you implemented the scroll trigger, rather giving you a general strategy for this kind of trigger.
At the moment you set the interaction on a section, for example, because you want that section to have a transition interaction. And you realize it doesn’t happen exactly when you want too soon, too late…).
In order to fine tune those interactions, you need to fiddle with the offsets
http://vincent.polenordstudio.fr/snap/cgtm0.jpg
But that’s not what I do or advise. Because it doesn’t make sense all the time and rather than really setting them up, you end up fiddling with them, trying numerous values to get an acceptable result.
Instead of doing that, I prefer to use dummy elements as triggers. Those dummy elements are just floating invisible DIVs. I make 20x20px divs, invisible, position:absolute, and I put the interaction on them. So I place them exactly where I want and when they reach the edge of the viewport, interactions fire up and affect what I’ve decided they affect (the sections).
So I have a disconnection between the interaction trigger and the interaction target. That’s easier to handle in my opinion, more precise, to the pixel, instead of relying to %age values.
Usually, all my dummies share the same class (ie: .dummy) and I make them a vibrant yellow or acid green color so they stand out. It’s great for placing them and test on publish, I always know where my interactions are. And when I push in production, I just give the dummy class a transparent color and they become invisible.
