Сначала анимируешь исчезновение блока, потом задаешь ему display:none;
Чтоб показать блок, делаешь все наоборот. Задаешь ему display:block, а потом анимируешь его появление.
Тут нет ничего сложного или каких-то скрытых знаний, все просто и в лоб.
В чем проблема jQuery? Благодаря ему, тебе не придется ломать голову над полифилами и выполнять кучу однотипных проверок. Там все уже сделано за тебя и работает годами. Попробуй поработать с classList в ие11.
Чтоб сделать анимацию, тебе надо знать начальные координаты и конечные. Получить их можно при помощи getBoundingClientRect или $.position / $.offset. Далее перемещай элемент как хочешь, хоть на css, задав транзицию и целевую позицию, или какой-то библиотекой.
При прокрутке надо проверять, находится ли элемент в зоне видимости экрана. Если да, то устанавливать нужному элементу соответствующий класс, например is-active. Для реализации надо знать величину текущей прокрутки, позицию желаемого элемента относительно начала документа и высоту экрана. Простое вычисление и вжух...
Картинка, canvas, svg. Но если ты надеешься на какое-то решение при помощи css, то можешь посмотреть в сторону clip. Естественно будет работать только в самых новых браузерах и то не во всех. Поэтому твой вариант - картинка.
Ну не знаю что тут сложного. Картинку оставить как есть, убрать ее атрибуты высоты и ширины. Добавить еще один блок и растянуть его на всю ширину. И в него можно пихать все что угодно.
SVG + GSAP = твой олень с 404 странички. Ничего сложного нет, нужны только промежуточные состояния оленя, в данном случае три, смотрит влево, смотрит на тебя, смотрит вправо. А при помощи gsap анимируются все точки из одного состояния в другое.
Потому что надо делать на canvas, а не выворачивать себе мозги, пытаясь сделать на svg и css. В IE и Edge плохая поддержка svg, и для SVG не работает transform-origin. Смирись и ищи обходной путь. Хоть каждую точку по отдельности аниммируй.
Ну тут все просто, если открыть devtools и посмотреть на то, как меняются стили элементов, то сразу станет все понятно. При прокрутке и достижении определенного положения, элементу задается его высота и ширина, а так-же position:fixed; top: 0; left: 0; Тем самым он прижимается к верху.
В случае успешного удаления, код уменьшится на пару кб. Это даст ровным счетом ничего. Больше эффекта будет от оптимизации любой крупной картинки. Либо сжатия стилей, если не сжаты.
Ты неправильно используешь сетку. .row .col .row .col уловил структуру? Разберись с сеткой бутстрапа и следуй его правилам, тогда у тебя все будет хорошо.