Ivan Bogachev

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

Да, вполне. Тут нужно понять такую вещь: есть задача и есть инструмент под задачу. Если вам нужно посадить кактус в горшок - экскаватор будет не к месту. И не всегда универсальный набор шестигранников подойдет под треугольный болт.

Вопрос : нужно ли вообще заморачиваться над серьёзным изучением анимации, джаваскрипта, или же забить и учить документацию гринсок?

Что такое GSAP? Ну вот без красивых слов? Это набор функций, решающих набор задач. А если у вас появится задача, на которую этот инструмент не рассчитан? Или задача, которую вообще никто еще не решал до вас, или готовые решения не подходят? Вы ничего не сможете сделать. Так что если вы хотите делать интересные вещи, которые выходят за рамки среднестатистического сайта, то ответ очевиден.

P.S.: И да, не зацикливайтесь на каком-то конкретном инструменте (например GSAP) только потому, что кто-то сказал, что это "стандарт". Всегда есть альтернатива. Например anime.js. То, что инструмент активно не развивается, не значит, что он вдруг перестал решать свою задачу. Старая добрая классическая zippo работала, работает и вас переживет.

Что ж вас всех так тянет к этому канвасу? (риторический вопрос)

1. Анимации буквы под ней фото. Как это делается? Подозреваю что canvas используется

Если вы про большие "прозрачные" буквы, через которые видны фотографии, то никакой канвас там не нужен. Это делается на svg-масках - просто и производительно. Соответственно при перемещении мышки добавляется transform:translate для маски. Задача тривиальная, но оставлю пример для ознакомления. Переход между слайдами делается аналогично.

2. Листание мышкой (зажимаешь появляются направляющие вверх-вниз, вправо-влево).

На нажатие мышки вешаете обработчик, показывающий эти элементы (думаю не стоит говорить о том, как поменять им opacity). Далее точно так же - на событие "перетаскивания" добавляете transform:translate для всех этих линий и transform:scale для кружков. При переходе между слайдами добавляете еще больше трансформаций по вкусу.

Остальные эффекты тоже интересуют. Понятно что css3, js, canvas

Для рисования линий можно опять взять svg и..... Это вообще мощный прием, много куда его можно приткнуть. Появление надписей можно сделать на CSS-анимациях. Вариантов много, можно начать с вот этого примера (только делать все в обратную сторону) или поиграть с размерами псевдоэлементов, положенных поверх текстов. Еще там есть постраничный скролл, но это легко загуглить.

Имеете в виду что-то такое?

чтобы клик срабатывал верно

Чтобы клик срабатывал, никакие привязки контекста вообще не нужны:

div.onclick = (e) => {
    e.target.classList.toggle("ss");
}

Если хочется попривязывать, то можно конечно, но для вашей задачи это усложнение на ровном месте:

function listener(e) {
    this.classList.toggle("ss");
}

div.onclick = (e) => {
    listener.call(e.target, e);
}

Терминология не относится именно к этому инструменту, она универсальная. Если пытаться как-то объяснить ее своими словами, то:

• Asset - актив, полезная вещь (в нашем контексте - файл), которую мы используем для чего-либо. Например используете иконку на странице - она есть ассет. То же самое относится к скриптам, файлам со стилями и.т.д.
  
• Bundle - связка, пучок; набор вещей, объединенных в одну кучу. В нашем контексте это набор ассетов (отдельных полезных файлов), собранных хитрым образом в один большой файл.
  

function Figure() {
    THREE.Group.call(this);
    this.add('TEST');
}

Figure.prototype = Object.create(THREE.Group.prototype); // <-- вы забыли вот это

let f = new Figure();

как я понимаю это работа с canvas

Совсем не обязательно. Треугольник можно вставить как картинку (формат SVG будет хорошим выбором), расположить его абсолютным/фиксированным позиционированием в нужном месте, а дальше к нему применять CSS-трансформацию "rotate". Пример того, как следить за мышкой и применять трансформации есть вот тут.

актуально ли использовать gremlin.js

Ну инструмент не очень популярный - всего 636 загрузок с NPM за последний месяц. Давно не обновлялся, но свою задачу по всей видимости продолжает решать, так что если вам он нужен - используйте.

Если б он был такой крутой, то его б все использовали

Используют. Не так много, но используют. Просто инструмент очень узкоспециализированный, его не везде имеет смысл применять. Я на свой сайт не стал бы этот инструмент тащить - две с половиной кнопки-ссылки, ну зачем там такое тестирование? Ну и не забывайте, при разработке большинства (подавляющего, к сожалению) сайтов слова "тестирование интерфейсов", и тем более "автоматизированное" звучат как что-то страшное-страшное и не дающее прибыли здесь и сейчас. Так что многие забивают.

Используйте последнюю доступную версию + Babel. С приходом ES6 (и небольшими дополнениями в виде следующих версий) язык сильно поменялся в положительную сторону, так что будет странно отказываться от удобств.

При фокусе на инпут используем transform: scale, чтобы увеличить картинку. Зрачков на картинке у товарищей нет (или можно закрывать белой точкой место, где они должны быть изначально), они наложены отдельными абсолютно спозиционированными элементами. При изменении состояния инпута смотрим сколько там символов и добавляем transform translate для зрачков. Можно такое и с координатами мышки делать (пример), тоже забавно получается.

И может есть какие то (?каталоги?) где можно найти подобного формата различные интересные (?фишки?) ?

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

И как вообще это реализовать?

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

Ошибка возникает из-за того, что переменная matches равна null. Вероятнее всего какая-то из ссылок имеет кривой href. Соответственно match(...) не находит совпадений и возвращает null. Перед тем, как использовать результат работы этого метода, проверяйте что он вернул.