ScrollMagic - всегда анимируйте первый элемент первым - PullRequest
Новая
       7

ScrollMagic - всегда анимируйте первый элемент первым

0 голосов
/ 23 ноября 2018

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

$('.data-scrollIn').each(function(index, elem) {
  // Init ScrollMagic Controller
  var controller = new ScrollMagic.Controller();

  // Create Animations
  h2 = $(elem).find('h2');
  h3 = $(elem).find('h3');
  btn = $(elem).find('.btn');
  p = $(elem).find('p');
  img = $(elem).find('img');
  span = $(elem).find('span.js-fade-order');

  var tl = new TimelineMax({
    pause: true
  });
  tl.add("start") // add timeline label

  .fromTo(span, 0.6, {
    opacity: 0,
    y: "40px",
  }, {
    opacity: 1,
    y: "0",
    ease: Power0.easeInOut
  },  0.3, "start")

    .fromTo(h2, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    },  0.6, "start")

    .fromTo(img, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 0.9, "start")

    .fromTo(h3, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 1.2, "start")

    .fromTo(p, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 1.5, "start")

    .fromTo(btn, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    }, 1.8, "start")
   // Create the Scene and trigger when visible
    var sceneFade = new ScrollMagic.Scene({
      triggerElement: elem,
      offset: -100 /* offset the trigger Npx below scene's top */
    })
    .setTween(tl)
    .addTo(controller);
 });

1 Ответ

0 голосов
/ 23 ноября 2018 
 $('.data-scrollIn').each(function(index, elem) {
  // Init ScrollMagic Controller
  var controller = new ScrollMagic.Controller();

  // Create Animations
  fadeElem = $(elem).find('h2, h3, .btn, p, img, span.js-fade-order ');

  var tl = new TimelineMax({
    pause: true
  });
  tl.add("start") // add timeline label

    .staggerFromTo(fadeElem, 0.6, {
      opacity: 0,
      y: "40px",
    }, {
      opacity: 1,
      y: "0",
      ease: Power0.easeInOut
    },  0.6, "start")

  // Create the Scene and trigger when visible
    var sceneFade = new ScrollMagic.Scene({
      triggerElement: elem,
      offset: -100 /* offset the trigger Npx below scene's top */
    })
    .setTween(tl)
    .addTo(controller);
});
...