Проблема с добавлением нескольких контактов и анимацией фона в Scrollmagic?

Question

Я добавил TimeLineMax к сцене, над которой я работаю. Функциональность отлично работает, но у меня возникают проблемы с несколькими деталями.

Я хотел бы, чтобы моя сцена была как этот сайт http://www.google.com/inbox/#bundles. Этим я хочу несколько контактов в одной сцене, чтобы пользователь не мог прокручивать мои анимации, не просматривая их.

Вот демо-сайт моей работы до сих пор: https://so-staging.herokuapp.com/users/sign_in#publisher-demo-container

Вы можете увидеть свой прогресс, если вы прокрутите вниз. Три шага появятся, а затем оживятся. Я также скорректировал фоновое положение # издателя-демо-шагов на основе прокрутки.

Однако цель не является желаемой. Я бы хотел: 1. Pin # publisher-demo 2. Пошаговый шаг 1 анимированный фон-положение на прокрутке. 3. Пошаговый шаг 2 4. Пошаговый шаг 3

Я хотел бы, чтобы каждый шаг был закреплен так, чтобы пользователь не мог перейти к следующему шагу, пока анимация не будет завершена.

Я знаю, что это сбивает с толку, и я смотрел на него слишком долго. Спасибо за помощь. Вот мой scrollmagic и GSAP-код.

var controller = new ScrollMagic();

var tween = new TimelineMax() 
     .add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"})) 
     .add(TweenMax.to(".blue-circle", 1, {display: "block"})) 
     .add(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3})) 
     .add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "22% 52%"})) 
     .add(TweenMax.to(".red-circle", 1, {display: "block"})) 
     .add(TweenMax.to(".red-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3})) 
     .add(TweenMax.to("#publisher-demo-steps", 0.5, {backgroundPosition : "76% 50%"})) 
     .add(TweenMax.to(".green-circle", 1, {display: "block"})) 
     .add(TweenMax.to(".green-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3})); 

    var scene = new ScrollScene({triggerElement: "#publisher-demo", duration: 4000, triggerHook: -100}) 
       .setPin("#publisher-demo") 
       .setTween(tween) 
       .addTo(controller); 

Answer 1

Если вы правильно поняли, что хотите активировать анимацию, чтобы играть в unbound из прокрутки.

Как вы это делаете, не связывая сцену, которая делает вывод. Как только сцена имеет длительность, она будет связывать прогресс анимации, чтобы прокрутить ход.

Затем вы просто добавляете сцену для каждой точки запуска анимации.

т.е. так:

new ScrollScene({triggerElement: "#trigger-element", duration: 4000, triggerHook: 0}) 
      .setPin("#publisher-demo") 
      .addTo(controller); 

new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0}) 
      .setTween(new TimelineMax() 
       .to("#publisher-demo-steps", 0.5, {backgroundPosition : "50% 23%"}) 
       .to(".blue-circle", 1, {display: "block"}) 
     ) 
      .addTo(controller); 

new ScrollScene({triggerElement: "#trigger-element", triggerHook: 0, offset: 300) 
      .setTween(TweenMax.to(".blue-circle", 1, {className: "+=animated zoomOut", display: "none", delay:3})) 
      .addTo(controller); 

Общих замечания:

• Как вы видите, я использовал триггер элемент, который отличается от стержневого элемента. Он должен располагаться как абсолютный и находиться в том же положении, что и закрепленный элемент. причина, по которой я это делаю, потому что закрепленный элемент перемещается и будет давать неправильную стартовую позицию для других сцен.
• A triggerHook -100 не имеет никакого смысла. Значение может по определению быть только между 0 и 1.
• вместо TimelineMax(). Добавить (TweenMax.to()), вы можете использовать сокращенную TimelineMax(). К() (см http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/)
• Примечание, что ScrollMagic 2 уже выпущен на некоторое время. Синтаксис очень похож, поэтому вы должны рассмотреть возможность обновления.