Как инициировать динамическое кол-во секций в SCROLLMAGIC.JS?

Question

[kuzubina]

Есть вот такого плана структура страницы https://codepen.io/PointC/pen/eLgpWa секции для горизонтальной прокрутки для инициализации плагина изначально описываются в js
Как сделать чтобы рандомное кол-во секций инициализировалось и нормально работало? (к примеру если из админки WP будутдобавлять новые)

Comments

[Вадим]

Добавить для контента в даминке поле, которое бы спрашивало какой должен быть эффект появления и на основе значения этого поля отдавать html, на элементах которого будут data-атрибуты, по значению которых инициализировать скрипт?

Либо сделать на все секции 1 класс и в цикле инициализировать по порядку разные эффекты.

[kuzubina]

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

[kuzubina]

TweenLite.defaultEase = Linear.easeNone;
    var controller = new ScrollMagic.Controller();
    var tl = new TimelineMax();
    // tl.from("section.panel", 1, { yPercent: 100 });
    // tl.from("section.panel.turqoise", 1, { yPercent: 100 });
    // tl.from("section.panel.bordeaux", 1, { yPercent: 100 });
    // tl.from("section.panel.brown", 1, { yPercent: 100 });
    // tl.from("section.panel.green", 1, { yPercent: 100 });
    // tl.from("section.panel.blue", 1, { yPercent: 100 });

    var slides = document.querySelectorAll("#pinContainer section");

    new ScrollMagic.Scene({
            triggerElement: "#pinMaster",
            triggerHook: "onLeave",
            duration: "200%"
        })
        .setPin("#pinMaster")
        .setTween(slides.forEach(el => tl.from(el, 1, { yPercent: 100 })))
        .addIndicators({
            colorTrigger: "white",
            colorStart: "white",
            colorEnd: "white",
            indent: 40
        })
        .addTo(controller);

таким способом не хочет работать(

[Вадим]

kuzubina, ну что Вам мешает в скрипте инициализации сделать так:

var panels = document.querySelectorAll('.panel');
var pannelEffectsMap = {
  0: {xPercent: 100},
  1: {xPercent: -100},
  2: {yPercent: 100},
}

pannels.forEach(function(panel, index){
  tl.from(panel, 1, pannelEffectsMap[index]);		
})

Разумеется тут нужно ещё дописать функцию, которая бы корректно высчитывала индекс эффекта на основе текущего индекса в цикле чтобы не зависеть от количества элементов.
Например через деление index%n, где n - количество предзаготовленных эффектов

[Вадим]

что то типа такого

pannels.forEach(function(panel, index){
  var mapIndex = index % 3 // Так как в pannelEffectsMap только 3 "эффекта"
  tl.from(panel, 1, pannelEffectsMap[mapIndex]);
})

[Вадим]

kuzubina, ну и скипать первую панельку. В итоге получим вот такой скрипт:

TweenLite.defaultEase = Linear.easeNone;
var controller = new ScrollMagic.Controller();
var tl = new TimelineMax();
var pannelEffectsMap = {
  0: {xPercent: 100},
  1: {xPercent: -100},
  2: {yPercent: 100},
};
var panels = document.querySelectorAll('.panel');
panels.forEach(function(panel, index){
  if(index !== 0){
   var mapIndex = index % 3 // Так как в pannelEffectsMap только 3 "эффекта"
  tl.from(panel, 1, pannelEffectsMap[mapIndex]);		 
  }
})


new ScrollMagic.Scene({
  triggerElement: "#pinMaster",
  triggerHook: "onLeave",
  duration: "200%"
})
  .setPin("#pinMaster")
  .setTween(tl)
  .addIndicators({
  colorTrigger: "white",
  colorStart: "white",
  colorEnd: "white",
  indent: 40
})
.addTo(controller);

p.s. поисправлял пару опечаток и синтаксических ошибок

[kuzubina]

Вадим, та мне эффекты не играют роль, можно один эффект сделать для всех секций, я подобного плана пробую делать через forEach но не работает сам привязка плагина .setTween(tl)

[Вадим]

kuzubina, Видимо, я не понимаю в чём вопрос :-(
Пользуясь мои последним предоставленным листингом добавил ещё 2 секции и всё работает, все появляются с разных сторон без изменения в скрипте.

[kuzubina]

Вадим, Спасибо ВАМ ОГРОМНОЕ ДОБРЫЙ ЧЕЛОВЕК:)

[Вадим]

kuzubina, Отметьте решением :-)

Answer 1

[Вадим]

TweenLite.defaultEase = Linear.easeNone;
var controller = new ScrollMagic.Controller();
var tl = new TimelineMax();
var pannelEffectsMap = {
  0: {xPercent: 100},
  1: {xPercent: -100},
  2: {yPercent: 100},
};
var panels = document.querySelectorAll('.panel');
panels.forEach(function(panel, index){
  if(index !== 0){
   var mapIndex = index % 3 // Так как в pannelEffectsMap только 3 "эффекта"
  tl.from(panel, 1, pannelEffectsMap[mapIndex]);		 
  }
})


new ScrollMagic.Scene({
  triggerElement: "#pinMaster",
  triggerHook: "onLeave",
  duration: "200%"
})
  .setPin("#pinMaster")
  .setTween(tl)
  .addIndicators({
  colorTrigger: "white",
  colorStart: "white",
  colorEnd: "white",
  indent: 40
})
.addTo(controller);