If I change the scroll start values, the animation runs twice

I have a series of feature boxes going down a page. They all have a class “.resource” which is used as the trigger. I’ve turned on batch mode and stagger so that they will fade in staggered whenever they appear in the viewport or as the user is scrolling down the page etc.
Everything works well at this point. When the page loads, if any of the boxes are currently visible, they all stagger in nicely, and then the user can scroll and more will fade in. Great! If there are none in the viewport at all, then of course the animation doesn’t start until one scrolls into view.

Next I wanted to try and not start the animation until the top of the element is a little higher into the viewport. According to the docs for Scroll Start, I should be able to use something like “top 85%” so that the top of the element should be about 85% down the viewport before the animation starts. I’ve also used pixel values here experimenting.

This doesn’t work, because what happens is that the animation runs a second time almost like it’s acting as another trigger entirely. So when the page opens, the animation/batch/stagger runs, but then as I scroll and the top of an element reaches 85%, the element re-runs its animation again. It disappears, snaps back to the starting position and then runs again even though it already ran the first time.
If I don’t put anything in the scroll start and end boxes and leave them default, the animation is fine but it starts too early.

I do quick and subtle animations and if it starts slightly off the viewpoint, it’s already done before it comes into view. I want the animation to not start until the element is into the viewport just a bit, which still performing the correct batching and staggering.

What am I doing wrong?