Add class when element becomes visible

[mukhammad-akilov]

Hello! It would be cool if you implemented such a function. That is, only the class name is added to the element without any animations.

[jlmakes]

Thanks @Ghost180195

This has come up before (#143), but I’m not sure how I feel about adding this to the API since so much of ScrollReveal's raison d'être is creating animations.

That said, even though it’s not baked-in, it’s now possible with v4 because:

• CSS Transform styles are no longer generated unless needed.
• options.opacity now accepts null to skip generating opacity styles.

That means a configuration like this would essentially do nothing, but give you access to callbacks:

var options = {

    delay:    0,
    distance: 0,
    duration: 0,
    scale:    1,
    opacity:  null,

    rotate: {
        x: 0,
        y: 0,
        z: 0
     },

    beforeReset: function (el) {},
    beforeReveal: function (el) {}
}

You can see how this can be monkey patched to create a new watch() method, which would allow you to do this:

ScrollReveal().watch('.items',
    function onEnter (el) {
        el.classList.add('active')
    },
    function onExit (el) {
        el.classList.remove('active')
    }
)