scrollmagi c с реагированием и динамическим c рендерингом контента - PullRequest
Новая
       64

scrollmagi c с реагированием и динамическим c рендерингом контента

0 голосов
/ 03 мая 2020

const Posts = () => {

const [posts, setPosts] = useState(null);

  useEffect(() => {
    if (posts) {
    setPosts(posts);

    new ScrollMagic.Scene({
      triggerElement: ".stickyposts",
      triggerHook: "onLeave",
      duration: 1000,
    })
     .setTween(".stickyposts", 1, { opacity: 0 })
     .addTo(controller);
  }
}, [posts])
}

Я хочу анимировать div ".stickyposts" при прокрутке, но если я введу функцию возврата: 

 return (
      <div className=" stickyposts">
         {posts && <section>
            ...
         </section>}
      </div>
   )

анимация работает, но если я наберу: 

return (
          <>
           {posts && <div className=" stickyposts">
              <section>
                ...
              </section>
           </div>}</>
       )

, анимация не работает, и я получаю сообщение об ошибке: gsap не находит ".stickypost"; и мне нужно написать вторую часть кода, которая выдает ошибку в производстве. как можно решить эту проблему. NB. Я пытался использовать useRef, но получаю тот же результат.

...