ScrollSmoother .effects() function works only one time

[Oskars]

I have block with switchable tabs where is multiple scrolltrigger animations,  when I am switching tabs i kill all scroll effects and rerun them, becouse on tabs switch is hardly changing html where need scrolltrigger animations. My custom scrolltrigger functions is working, but built in .effects() function works only on first tabs switch. If i am changing tabs more than one time, data-speed effects isnt working.

let smoothScroll

let smoothScrollParams = {
  normalizeScroll: true,
  smooth: 1.5,
  effects: true
}

export function smoothScrollCreate(){
  smoothScroll = ScrollSmoother.create(smoothScrollParams);
}

export function killAllScrollEffects(){
  ScrollTrigger.killAll()
}

export function reInitSmootherEffects(){
    smoothScroll.effects("[data-speed]")
}

$('.js-tab').click(function (){
    let tab = $(this).data('tab-id')
    activeType = $('.' + tab)

    killAllScrollEffects()

    $('.js-key-to-uniqueness-container').hide()
    activeType.show()

    setTimeout(function () {
      updateSmoothScroll()
      smoothScrollTo('.js-types-block')
      initActiveTabScrolltriggers() // run all custom scrolltrigger animations
      reInitSmootherEffects() // this is working only on frist tabs change
    }, 400)
  
})

 

 

[Rodrigo]

Hi @Oskars and welcome to the GreenSock forums!

 

Is really hard for us to find the issue without a live minimal demo to have a look at what could possibly be the problem.

 

The only advice/suggestion I can give you right now is to use the kill() method in the ScrollSmoother instance instead of executing ScrollTrigger's killAll() method. But as I mentioned before, without a live example is really hard to give you the adequate support, so hopefully you'll be able to provide one.

 

Happy Tweening!