My mind is twisted up here but I think the docs are wrong on the Scroll Start (maybe Scroll End as well).
The docs give four examples:
top top- The animation will start when the top of the element hits the top of the viewport.
This is accurate.
+=100px- The animation will start when the top of the element hits the bottom of the viewport, plus 100px.
This is not accurate. If you only give one value like this, then the trigger element doesn’t begin the animation until the TOP of the viewport, because these values are always relative to the top. To do what is said here would have to be +=100px bottom and needs the extra keyword “bottom” for the viewport, otherwise it defaults to the top. The effect is that the element would come “into the viewport” by 100px before the animation starts.
-200px top- The animation will start 200 pixels above the top of the viewport.
I believe this should read -=200px not just -200px though perhaps it would still work that way.
+=50% bottom– The animation will start when the bottom of the element is 50% of the way down the viewport, plus the height of the element.
This is not accurate, it completely reverses the order and assumes the first value is the viewport? The element should be first and viewport second.
For the bottom of the element to reach 50% of viewport, you only need bottom center.
To make it start at the bottom of the element plus 100% of the element’s height, it would be more like bottom+=100% center.
This would cause the animation to start after the element’s bottom goes past center by the amount of its own height.
You can see how the last two examples are reversing which value is assumed is the viewport. -200px top “top of the viewport” (correct), and then +=50% bottom “…50% of the way down the viewport…” (incorrect).
Hopefully you can double-check the examples for Scroll Start and Scroll End and verify they are perfectly accurate. Maybe update the examples to some values that would be most useful and common. For example starting the animation only when the element comes into the viewport a little bit so that it doesn’t trigger too early. And starting the animation as the element gets more toward the top. Or starting in the middle, etc.
Thanks!