gsap не видит в react компоненте классы

Question

Пробовал дать дом дерево через useRef, но на это он отвечал ошибками и не проигрывал анимацию. Буду очень признателен если расскажите в чем моя ошибка. Заранее спасибо

const dom = useRef(null)
gsap.registerPlugin(ScrollTrigger)
gsap.fromTo("h4, .button, .title, li", {opacity: "0%"}, {opacity: "100%", duration: 1.5})
const tl = gsap.timeline();

tl.to('.content, .blur', 6, {top: '0%'}, '-=6')
  .to('.title, nav, .footer-wrapper', 6, {y: -600, markers: true,}, '-=6')
  .from('.one', 3, { top: '40px', autoAlpha: 0 }, '-=4')
  .from('.two', 3, { top: '40px', autoAlpha: 0}, '-=3.5')
  .from('.three', 3, { top: '40px', autoAlpha: 0 }, '-=3.5')
  .from('.four', 3, { top: '40px', autoAlpha: 0 }, '-=3.5')
  .from('.text', 3, { y: 60, autoAlpha: 0}, '-=4')

ScrollTrigger.create({
  trigger: 'section',
  scrub: true,
  start: "bottom",
  markers: true,
})

<div className="start-page" ref={dom}>
  ...
</div>

Answer 1

gsap видит дом дерево только внутри хука useRef() Пример:

const tl = gsap.timeline();

useRef(() => {
  gsap.to(".title", {
    opacity: "100%", 
    duration: 1.4,
    scrollTrigger: {
        trigger: ".blur",
        markers: true,
    }
  })                     // Без таймлайна
  tl.to(".title", {
    opacity: "100%", 
    duration: 1.4,
    scrollTrigger: {
        trigger: ".blur",
        markers: true,
    }
  })                     // Тоже самое только с таймлайном
})

БЛОГ НА HUSL

gsap не видит в react компоненте классы

Ответы (1 шт):