реализация анимации прокрутки с помощью gatsby и gatsby-plugin-scroll-discovery

Question

реализация анимации прокрутки с помощью gatsby и gatsby-plugin-scroll-discovery

Я пытаюсь добавить анимацию прокрутки на свой сайт gatsby. Плагин, который я использую, sal должен поддерживать анимацию, когда элемент появляется в поле зрения и / или когда элемент уходит. Я пытаюсь добавить слайд-анимацию к элементу, когда он находится в поле зрения, но я знаю, как заставить это работать. Когда я пытаюсь запросить элемент, он отображается как null. Кто-нибудь знает, как заставить это работать.

ps все настроено правильно в конфигурации gatsby, я могу заставить работать анимацию, но только не анимации sal:in и sal:out

sal docs

const IndexPage = () => {
  const element = document.querySelector(".animated")

  element.addEventListener("sal:in", ({ detail }) => {
    console.log("entering", detail.target)
  })
  return (
    <Layout>
      <Head title="Home" />
      <div className={indexStyles.wrapper}>
        <h1 className={indexStyles.heading}>Hello World.</h1>
      </div>
      <div className={indexStyles.grid}>
        <div className={indexStyles.item1}>
          <img alt="pink background" src={HQpink}></img>
          <div className={`${indexStyles.blurb} animated`}>
            <div className={indexStyles.flexHeader}>
              <div className={indexStyles.myFace}>
                <img alt="ren" src={Ren}></img>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  )
}

0

reactjs animation scroll gatsby gatsby-plugin

Источник

user12365095 20 авг '20 в 23:23

0 ответов

Другие вопросы по тегам reactjs animation scroll gatsby gatsby-plugin

user12160227 23 сен '20 в 12:07 2020-09-23 12:07 · Answer 1 · 2020-09-23 12:07

Это весь ваш код? Значит, вы не указали элемент, к которому хотите применить эффект раскрытия прокрутки.

Предположим, вы хотите анимировать оболочку. Добавьте к нему настраиваемые атрибуты, как показано ниже:

<div data-sal="slide-up" data-sal-duration="400" data-sal-easing="ease-in" className={indexStyles.wrapper}>
  <h1 className={indexStyles.heading}>Hello World.</h1>
</div>