Behavior where scroll position is repeated

I am tryin to implement asscroll with ScrollTrigger which works fine, but I get a strange behavior with and without using scrolltrigger. For some reason whenever I scroll (with wheel or moving the scrollbar) the scroll progress gets to its target and then reverts to the prescroll position and does it again. Its like something doesn’t catch up with the scroll state and resets it.

My DOM is a bit weird, I have basically an empty container (React) the refs are the the target elements f or scrollTrigger and asscroll. I only have one element that sits a the bottom of this empty container as I want it to scroll in naturally. The rest of the content is in fixed panels that have their own animations based on scroll position.

<ScrollRange ref={asscrollContainerRef}>
  <ScrollInner
    ref={containerRef}
    css={{
      height: '400vh',
    }}
  >
    <BackgroundVideo videoRef={videoRef} />
  </ScrollInner>
</ScrollRange>

The asscroll code waits for an appReady state variable to become true before it initializes

useEffect(() => {
  if (appReady) {
    asscrollRef.current = new ASScroll({
      containerElement: asscrollContainerRef.current,
      disableRaf: true,
    })
    const asscroll = asscrollRef.current

    gsap.ticker.add(asscroll.update)

    ScrollTrigger.defaults({
      scroller: asscroll.containerElement,
    })

    ScrollTrigger.scrollerProxy(asscroll.containerElement, {
      scrollTop(value) {
        return arguments.length ? asscroll.scrollTo(value) : asscroll.currentPos
      },
      getBoundingClientRect() {
        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }
      },
    })

    asscroll.on('update', ScrollTrigger.update)

    ScrollTrigger.addEventListener('refresh', asscroll.resize)

    mainTimeline.current = gsap.timeline({
      scrollTrigger: {
        trigger: containerRef.current,
        start: 'top top',
        end: 'bottom bottom',
        // onSnapComplete,
        // snap: {
        //   snapTo,
        // },
        onUpdate,
      },
    })

    asscroll.enable()
  }
  //eslint-disable-next-line
}, [appReady])

this is basically the same implementation as your scrolltrigger example. I attached a video of the behavior

https://user-images.githubusercontent.com/1272089/118296141-79b38d80-b491-11eb-8519-c4c73fdea25d.mp4

So after every scroll it resets to the start position of the scroll and then does the scroll again. I am confident that I am doing something wrong, and its not the library as it works for everyone else 😉. Any help would be appreciated.

[edit]

Forgot to add CSS for the DOM elements

const ScrollRange = styled('div', { position: 'fixed' })
const ScrollInner = styled('div', {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
})

[watarutmnh]

I had a similar issue. In my case I could fix it removing style below:

html {
    scroll-behavior: smooth;
}

[S-n-d]

@watarutmnh thank you very much! That is indeed the solution.