ScrollTrigger - callback not woking if element is already shown!

[terwanerik]

ScrollTrigger - callback not woking if element is already shown!

[terwanerik]

v1.0 is just released! Could you check if this issue still exists? Please note that the API has changed quite a bit.

[terwanerik]

The scroll-showCallback can now be set either as a global callback, e.g. triggering by default on all triggers, or when adding a certain set of triggers;

Global / default callback

const scrollTrigger = new ScrollTrigger({
  trigger: {
    toggle: {
      callback: {
        in: () => {
          // This is the same as setting a data-scroll-showCallback
          alert('in')
        },
        out: () => {
          // This is the same as setting a data-scroll-hideCallback
          alert('out')
        }
      }
    }
  }
})

scrollTrigger.add('[data-scroll]')

Only for certain triggers

const trigger = new ScrollTrigger()
// Add simple triggers, without callback
trigger.add('[data-scroll]')

// Add triggers to the ScrollTrigger, only with attribute `data-scrollWithCallback`
trigger.add('[data-scrollWithCallback]', {
  toggle: {
    callback: {
      in: () => {
        alert('in')
      },
      out: () => {
        alert('out')
      }
    }
  }
})

Adding some documentation for upgrading from 0.x to 1.x sounds like a good idea, i'll add that to the roadmap.

[terwanerik]

Added documentation on migrating from 0.x

[vdorchan]

I have the same problem

[terwanerik]

v1.0 is coming soon, this will fix this issue. I'm still working on it, but quite busy at the moment. I would love to support Vue.js and React out of the box, this still takes some work; but the 'basic' idea works perfectly.

If you are brave you can already use the current draft of 1.0 @ https://github.com/terwanerik/ScrollTrigger/tree/v1.0

[ctlaux]

I have the same problem. Is v1.0 around the corner? I don't mean to rush you, if it is farther off I will try and build my own, as you suggested. Thanks for the library btw.

[Jeremboo]

I tried the v1.0 draft and it doesn't seem to work too. Any indications to try to fix this?

[terwanerik]

Updated the codepen to use v1.0.0, now works as expected.

https://codepen.io/erikterwan/pen/qBBMVXQ

[ctlaux]

Hmm, I'm not sure how to map my old config to the new API... I have various data-scroll-showCallback in my html file, where do I put these for the new API? Maybe this should be documented in more detail and specifically for switching versions...