Какой есть вариант привязки контекста?

Вас bind чем то не устраивает или просто спрашиваете?
Вообще есть два подхода чтобы именно "забиндить" контекст.
Второй через замыкание.

И два метода при вызове функции - call и apply

Почему с картинкой ничего не происходит?

Владислав Олегович, или сделайте 20 картинок тэгом img, скройте все по умолчанию, кроме первой, а в цикле меняйте видимость.

Почему с картинкой ничего не происходит?

Владислав Олегович, как я уже сказал, у вас всего один тэг img и всего 2 ссылки на картинке.
Хотите чтобы одна 20 раз поменялась - сделайте массив на 20 путей до картинок
типа: ['1.png', '2.png'...'n.png']
найдите элемент img на странице и сохраните в переменную.
А потом в цикле меняйте src у картинки.
с помощью setTimeout можно задать задержку.

Где взять похожий скрипт?

мде там всё на position absolute и transform translate

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

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

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

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

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

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. поисправлял пару опечаток и синтаксических ошибок

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

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

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

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

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 - количество предзаготовленных эффектов

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

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

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

Почему отсутствует табуляция у сниппета в vs code?

Виталий, neznaiaka, А можно подучить матчасть:
\t - символ табуляции.
fkn.ktu10.com/?q=node/7524

Почему отсутствует табуляция у сниппета в vs code?

а где у вас символы табуляции в снипете?

Почему не срабатывает клик?

демку бы с вёрсткой и тд

Какой способ лучше?

есть ещё вариант добавить тротлинг\дебаунс и тригериться не на каждое событие скрола, а, скажем, только на последнее, если оно единственное за последние, скажем, 300миллисекунд

Как убрать артефакты в комментариях css?

maiskiykot, Либо воспроизведите проблему в демке и покажите её, чтобы Вам можно было помочь, либо идите к экстрасенсу.

Как убрать артефакты в комментариях css?

maiskiykot, Не хотите Вы помощи... только время тратите.
Чтож. Вот я сделал имплементацию по предоставленной информации.
Никаких лишних полос нет.

Как убрать артефакты в комментариях css?

maiskiykot, сейчас я из своей волшебной шляпы достану именно Ваш спрайт и всю именно Вашу вёрстку и всё проверю. Секунду...

Как убрать артефакты в комментариях css?

Демку сделайте со своим спрайтом

Как заставить блоки ужаться к форме?

Похоже проблемы из-за fieldset

Не видит элемент?

e.stopPropagation();
    menuItems[x]. // при клике назад во втором линке menuItem[1] - .navigation__item.
    querySelector(".navigation__list"). // у него только один ребёнок - a. Соответственно тут null
    classList.remove("navigation__submenu--active"); // а у null нет classList.

Рекомендую научиться дебажить код по средствам точек остановки в инсрументах разработчика.