Реагировать - GSAP w / ScrollMagi c - Невозможно добавить параметр сцены 'tweenChanges', потому что он уже существует - PullRequest
Новая
       75

Реагировать - GSAP w / ScrollMagi c - Невозможно добавить параметр сцены 'tweenChanges', потому что он уже существует

3 голосов
/ 06 марта 2020

Цели этого Codepen (Go для папки scrollExample, которая отвечает за маршрут / scroll) состоит в том, чтобы вызвать эффект раскрытия изображения на прокрутке раздела.

Как я делаю анимацию:

Сначала я использую CSSRulePlugin GSAP, чтобы получить псевдоэлемент, который я хочу анимировать. После этого я создал временную шкалу, чтобы поместить анимацию и написать свойства анимации.

Теперь поговорим о ScrollMagi c, сначала я создал контроллер, а затем сцену. Со сценой я передаю селектор элемента, который я хочу, чтобы вызвать анимацию, а также продолжительность (количество пикселей). И самая важная часть - установить анимацию, которая будет срабатывать при прокрутке раздела. 

 componentDidMount() {
        const imageReveal = CSSRulePlugin.getRule(".image-container:after");
        const timeline = new TimelineLite();
        timeline.from(imageReveal, {
          duration: 0.4,
          cssRule: { scale: 1.2 }
        });

        new ScrollMagic.Scene({
          triggerElement: "#scrollStarts",
          duration: 100
        })
          .setTween(timeline)
          .addTo(this.controller); // assign the scene to the controller
      }

Проблема: Анимация прокрутки не работает, и я получаю следующее ошибки: 

[static] ScrollMagic.Scene -> Cannot add Scene option 'tweenChanges', because it already exists.
(animation.gsap) -> ERROR calling method 'setTween()': Supplied argument is not a valid TweenObject

Я не знаю, почему моя анимация недопустима и почему tweenChanges уже существует, так как я не вижу ничего, что происходит на свитке.

1 Ответ

1 голос
/ 13 марта 2020

В проекте используются две библиотеки - scrollmagic-plugin-gsap и по умолчанию одна из них scrollmagic.

scrollmagic-plugin-gsap предназначена для настройки с ScrollMagic, TweenMax, TimelineMax, а не ScrollMagic и gsap. См. документы по использованию

Если присмотреться, scrollmagic-plugin-gsap не требуется в вашем проекте, так как вы можете использовать плагин, предоставленный в библиотеке scrollmagic.

Как Библиотека animation.gsap.js из scrollmagic уже импортирована в App, удалите scrollmagic-plugin-gsap и удалите из scrollExample эти строки: 

import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

ScrollMagicPluginGsap(ScrollMagic, gsap);

Ошибка в консоли должна исчезнуть go. Ошибка была зарегистрирована, потому что плагин в scrollmagic-plugin-gsap и тот, в который добавлен scrollmagic, оба добавляют параметр tweenChanges.

...