ElementEntersView.js

document.addEventListener('scroll', this.onScroll);

function onScroll() {
        const offSet = this.getOffset();
        const midScreen = window.innerHeight / 2;
        let opacity = 1;

        // element is in viewport
        if (Math.abs(offSet) < midScreen) {
            // *pow to amplify opacity
            opacity = Math.pow(Math.abs(offSet) / midScreen, 2);
        }

        debug();  // let's see all the cool information
        this.setState({ opacity, offSet });
}

function getOffset() {
        const el = document.getElementsByClassName("fc-now-indicator-line")[0];
        const midScreen = window.innerHeight / 2;
        return el.getBoundingClientRect().top - midScreen;
}

function debug() {
        const offSet = this.getOffset();
        const windowHeight = window.innerHeight;
        const scrollHeight = window.scrollY;

        console.info(`
            opacity: ${this.state.opacity},
            offSet: ${offSet},
            windowHeight: ${windowHeight},
            scrollHeight: ${scrollHeight},
            inView: ${Math.abs(offSet) < windowHeight / 2}
        `);
}