TweenMax: wydajność na scrollu

Question

Hej!

 

Mam problem z zachowaniem wydajności animacji na scrollu. Już po kilku sekundach cała strona dramatycznie wolno reaguje na event scrolla, a nawet ruch kursorem. Efekt potęguje fakt, że animuje na raz kilkanaście elementów, jednak nawet gdy animowany jest jeden element wydajność nie powala. Kod poniżej (z React)

 

shapes.push(
      <Wrapper key={`shape-wrapper-${i}`} ref={WrapperRef}>
        <Shape key={`shape-${i}`} color={randomColor} />
      </Wrapper>)

      let currentElement = WrapperRef.current

      window.addEventListener('scroll', () => {
        TweenMax.set(currentElement, {y: 2 * (-window.scrollY)  })
      })

 

Answer 1

Poczytaj o metodach takich jak Throttling oraz Debouncing. 1.Throttling wymusza maksymalną liczbę wywołań funkcji w czasie. 2.Debouncing wymusza, aby funkcja nie była wywoływana ponownie, dopóki nie upłynie określony czas.