Проблемы с добавлением нескольких булавок и анимацией положения фона в Scrollmagic?

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

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

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

Вы можете увидеть мой прогресс, если прокрутите вниз. Появятся три шага, а затем их анимация исчезнет. Я также скорректировал положение фона # publisher-demo-steps на основе прокрутки.

Однако это не желаемая цель. Я бы хотел это: 1. Пин # 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);

gsap scrollmagic
person Justin Miller    schedule 27.04.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Это можно сделать, не привязывая сцену к закреплению. Как только сцена имеет продолжительность, она связывает прогресс анимации с прогрессом прокрутки.

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

т.е. вот так:

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);

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

  • Как видите, я использовал элемент триггера, отличный от закрепленного элемента. Он должен располагаться абсолютным образом и находиться в том же месте, что и закрепленный элемент. Причина, по которой я это делаю, заключается в том, что закрепленный элемент перемещается и будет указывать неправильную начальную позицию для других сцен.
  • triggerHook из -100 не имеет никакого смысла. Значение по определению может быть только от 0 до 1.
  • вместо TimelineMax (). add (TweenMax.to ()) вы можете использовать сокращение TimelineMax (). to () (см. http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/to/)
  • Обратите внимание, что ScrollMagic 2 уже давно выпущен. Синтаксис очень похож, поэтому вам следует подумать об обновлении.
person Jan Paepke    schedule 28.04.2015
comment
Спасибо, что ответили мне так быстро. - person Justin Miller; 29.04.2015
comment
Реализую ваши рекомендации и определенно ближе к тому, что я ищу. Одна вещь, которую я все еще пытаюсь понять, - это то, что я не хочу позволять пользователю прокручивать следующую сцену (например, шаг 1, шаг 2) до тех пор, пока первая сцена не будет завершена. Есть ли у них способ заблокировать функцию прокрутки до завершения анимации? - person Justin Miller; 29.04.2015
comment
Да, есть, но это считается прокруткой, и лично мне это очень не нравится, так как это плохой UX (отнимающий контроль над пользователем). Если вы все еще хотите это сделать, проверьте следующее: http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-tempoporary - person Jan Paepke; 30.04.2015