itsjustmypage

Так-то там просто изменяется transform у элемента через атрибуты translate3d и scale3d, а потом модальное окно на весь экран.

Из кода на сайте это примерно то, что вам нужно.

Для понимания сути происходящего:

Появляющийся снизу блок - это просто скрытый блок (display:none), появляющийся при наведении мыши на другой основной блок (смена display:none на display:block через псевдокласс :hover у основного блока). Расположение указывается засчёт указания позиционирования у появляющегося блока относительно родителя (с помощью position:absolute), причем у родителя обязательно должно быть указано позиционирование, отличное от стандартного static (укажите position:relative), чтобы вспомогательный блок позиционировался именно относительно него. Далее для вспомогательного блока указывается само его расположение (top: 100%), означающее, что он отступает на 100% высоты от основного блока и располагается внизу.

Итого - нужно сделать как выше, только изменив отступ top:100% на left:100% и top:0. Ну и размеры ограничить желательно.

Чтобы не устанавливать каждый раз пакеты, можно попробовать установить все локальные пакеты глобально (npm install <пакет> -g -D). Все Gulp задачи можно разбить по отдельным файлам, это же js.
Сделать 2 вида сборки - на продакшн и для себя можно так же в js через отдельные таски.

Вот пример такой сборки. alexfedoseev.com/post/54/frontend-project-build