Gatsby, Gsap - анимации gsap не работают после сборки - PullRequest
Новая
       19

Gatsby, Gsap - анимации gsap не работают после сборки

0 голосов
/ 07 марта 2020

Я создаю сайт, используя gatsby и gsap. Все анимации работают во время разработки, но не в рабочей версии.

Я анимирую изображение SVG, используя Gsap V3.

Где может быть проблема?

Спасибо для обратной связи! 

const HeaderComponent = () => {

  const animWrapper = useRef(null)

  useEffect(() => {

    const [elements] = animWrapper.current.children

    const what = elements.getElementById('What')
    const ever = elements.getElementById('Ever')
    const button = document.getElementById('header-button')
    const icon = document.getElementById('header-icon')

    const whatChildrens = what.children
    const everChildrens = ever.children
    const allChildrens = [...whatChildrens, ...everChildrens]

    gsap.set([...allChildrens, button], { autoAlpha: 0 })

    const timeLine = gsap.timeline({ defaults: { ease: 'power3.inOut' } })

    timeLine
      .to(whatChildrens, { autoAlpha: 1, duration: 0.75 })
      .to(everChildrens, { autoAlpha: 1, stagger: 0.025 })
      .to(button, { autoAlpha: 1 })
  }, [])

  return (
      <HeaderWrapper className="header" id="main-header">
        <div ref={animWrapper} id="header-logo-wrapper">
          <WhatEver style={{width: '100%'}}/>

          <HeaderButton id="header-button" onClick={() => scrollTo('#poznaj-nas')}>
            <FontAwesomeIcon icon={faArrowDown} id="header-icon"/>
          </HeaderButton>
        </div>
      </HeaderWrapper>
  )
}

1 Ответ

0 голосов
/ 08 марта 2020

Вам нужно будет импортировать то, что вы используете, например: 

import { gsap, TweenMax, TimelineMax, Power2 } from "gsap/dist/gsap";
...