Реагируйте с GSAP и ScrollMagi c - Твин недействителен - PullRequest
Новая
       16

Реагируйте с GSAP и ScrollMagi c - Твин недействителен

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

Я пытаюсь вызвать анимацию раскрытия моего изображения для каждой прокрутки раздела, и я делаю это с помощью GSAP + ScrollMagi c.

Проблема в том, что я получаю сообщение о том, что объект анимации недопустим. 

ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject

И это код анимации, который я хочу активировать при монтировании компонента: 

   useEffect(() => {
    const scrollControler = new ScrollMagic.Controller();
    const imageReveal = CSSRulePlugin.getRule(".image-container:after");
    const tl = new TimelineLite();
    const tween = tl.to(imageReveal, {
      duration: 1,
      cssRule: { width: "0%" },
      ease: "power2.easeInOut",
      paused: true
    });

    new ScrollMagic.Scene({
      triggerElement: ".image-section",
      triggerHook: 0
    })
      .setTween(tween)
      .addTo(scrollControler);
  }, []);

Почему моя анимация недопустима?

Это песочница с кодом (Go до / прокрутка маршрута) : https://codesandbox.io/embed/reveal-effect-with-reactjs-and-greensock-5i8pp?fontsize=14&hidenavigation=1&theme=dark

1 Ответ

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

Обновление: мне пришлось установить зависимость scrollmagi c -plugin-gsap, чтобы Scroll Magi c работал с GSAP 3.

В начале файла мы должны зарегистрировать Scroll Magi c с Gsap. Если нет, появятся ошибки типа «TweenMax не был определен». 

import * as ScrollMagic from "scrollmagic";
import { gsap } from "gsap";
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

ScrollMagicPluginGsap(ScrollMagic, gsap);

Вместо создания временной шкалы вы должны напрямую передать анимацию методу setTween сцены. 

.setTween(imageReveal, 0.4, { scale: 0, autoAlpha: 0 })
...