Exit and enter events for leaving and coming elements

I managed to replicate the Track Section Demo.

I would like to monitor the sections and change the opacity for leaving elements.

Leaving element means that:

• element state is still visible or fullyvisible
• some of the element’s edge is not visible, so pracatically not fully visible
• over time the visibility percentage decreasing

1. How to fire once an Exit event when the element leaving reaching a specified visibility percentage?
2. How to fire once an Enter event when the element coming into view reaching a specified visibility percentage?
3. Monitoring direction would be helpful.

I would like to read your thoughts about it. A possible API could be:

// Init VisSense
visobj = VisSense(this, {
   // Fully visible when 20% of the element visible on any side
   fullyvisible: 0.20,

// Set percentage for each direction
// - Single number would work for all direction, eg exit: 0.80
// - If a direction config missing, then get value from the opposite direction alue
// - if neather oposite direction not exists then get value from any or first direction value which is set
    exit: {
        top: 0.80,
        bottom: 0.20,
        left: 0.80,
        right: 0.20,
        },
    enter: {
        top: 0.60,
        bottom: 0.80,
        left: 0.60,
        right: 0.80,
        }
    }
});


/**
 * Elements Visibility Monitor
 */
var visibility_monitor = visobj.monitor({

    strategy: new VisSense.VisMon.Strategy.PollingStrategy(),

    exit: function(direction, me){

        console.log(direction)
        // possible direction values:
        // top, right, bottom, left
        // topright, topleft, bottomleft, bottomright

    },

    enter: function(direction, me){

        console.log(direction)
        // possible direction values:
        // top, right, bottom, left
        // topright, topleft, bottomleft, bottomright

    }

});

I think I can work out with percentagechange event, but requires some thoughts to figure out the base logic, in which I need your help.

[theborakompanioni]

@kilhelp This feature request is now nearly three years old - it seems I wont have time to implement it in the foreseeable future - so I just had to close it. As time is scarce, code changes to VisSense will be bug fixes only. Even the es6 port has not seen the light of day - which would have also been important.

If you’re motivated, I am happily accepting pull requests 😄

[stophecom]

First, thanks for this great plugin. I really like it. By any chance - any update on the “scroll direction” topic? Or is anybody aware of an alternative with similar features? (There are a couple, but I’ve not seen one that supports percentagechange - which is awesome btw.)

[Edit] Never mind. Realised this can be done natively. Intersection Observer API (As long as you don’t have to support older browsers)