Animate element when its distance from top is greater than 100px

[awsomedesigner]

Hello folks,

I want to animate element when element distance from the top is greater than 100px.

I have some code

ScrollReveal().watch = function (target, onEnter, onExit) {

    onExit = onExit || function () {}

    if (typeof onEnter === 'function' && typeof onExit === 'function') {
        var noEffect = {
            beforeReset: onExit,
            beforeReveal: onEnter, 
        }
        this.reveal(target, noEffect)
    } else {
        throw new Error('Watch received invalid arguments.')
    }
}

ScrollReveal().watch('.step-1-wrapper',
    function onEnter(el) {
        viewOffset:{
            bottom: 200;
        }
        el.classList.add('anim-step-1')
    },
    function onExit(el) {
        el.classList.remove('anim-step-1')
    }
)

Environment

• Operating System: mac
• Browser Version: chrome 69.0.3497.100
• ScrollReveal Version: v4.0.0

[jlmakes]

This code contains a mistake:

 ScrollReveal().watch('.step-1-wrapper',
     function onEnter(el) {
-        viewOffset:{
-            bottom: 200;
-        }
         el.classList.add('anim-step-1')
     },
     function onExit(el) {
         el.classList.remove('anim-step-1')
     }
)

The use of option.viewOffset here will do nothing because it is not in the correct place. I would start by moving this option inside the watch() options (and using top: 100 instead of bottom: 200)

 ScrollReveal().watch = function (target, onEnter, onExit) {

     onExit = onExit || function () {}

     if (typeof onEnter === 'function' && typeof onExit === 'function') {
         var noEffect = {
             beforeReset: onExit,
             beforeReveal: onEnter,
+            viewOffset: {
+                top: 100
+            }
         }
         this.reveal(target, noEffect)
     } else {
         throw new Error('Watch received invalid arguments.')
     }
 }