FR: option to "short-circuit" the observer callback

[pryley]

I have elements that reveal-in along the Y axis on scroll:

CustomEase.create("ease3", "M0,0 C0.35,0.028 0.338,1 1,1");

[].forEach.call(document.querySelectorAll('[data-reveal]'), el => {
    new ScrollObserver({
        whenVisible: '10%',
        triggerElement: el,
        gsap: {
            timeline: gsap.timeline({paused: true}).fromTo(el, {
                autoAlpha: 0,
                y: 50
            }, {
                autoAlpha: 1,
                duration: duration,
                ease: 'ease3',
                y: 0,
            }),
        },
    });
});

I cannot use this transition however with the ScrollObserver. It works great when scrolling the page up the Y axis, but scrolling down will cause jitters as when the bottom of the element reaches the top of the window the animation starts to move the element down again, essentially fighting against the direction of the scrolling.

The fix would be fairly simple:

var observerCallback = function observerCallback(entries) {
    entries.forEach(function (_ref2) {

        // check the y axis before proceeding
        if (_ref2.boundingClientRect.y < 0) {
            return; // do not animate when element is being scrolled past the top of the window
        }

        // ...
    });
}

Unfortunately, there is no option to short-circuit the observer callback so this cannot be done.

[jonkwheeler]

I highly recommend against animating the trigger element. Your triggerElement should not be your animated element. Make them be 2 different elements.

I recommend setting up a scrollTrigger element that it's soul purpose is to trigger the event, and not animate at all.

Follow this comment to find my recommendation: https://github.com/jonkwheeler/ScrollScene/issues/5#issuecomment-576702673

It's very easy to setup something like

<div className="data-reveal">
  <div className="scroll-trigger" />
  <div className="element-to-reveal" />
</div>

Just to hammer this home, never animate the trigger <--- this causes jumping.

[jonkwheeler]

I'm a bit slammed with work right now, but when I get time I'll update the README more to explain. I had to deal with this jumpiness years ago on scrollmagic. Once I changed the way in which I setup my triggers, I never had an issue again.

[pryley]

Thanks for the tip about the trigger.

While this solves the jitter, it does not solve the use case where I only want the animation to run when the trigger scrolls in and out of view from the bottom of the window, but not from the top of the window.

This is why a short-circuit callback option (with the observer entry as an available parameter) would be useful.

[jonkwheeler]

Ah I see. Yeah I'll consider adding this in the future. Nice shout. In the meantime you should use ScrollScene to achieve that.