Как быть — учить GreenSock или чистую CSS Animation?
Всем привет. Вчера узнал про GreenSock и возникла дилемма. CSS анимацию я знаю на среднем уровне, но хочу сделать упор на анимацию и знать её на хорошем уровне - это мне очень интересно.
Проблема заключается в изучении js. Многие вещи не могу реализовать из за отсутствия знания js, который, ну очень туго даётся в изучении. И двойка по математике в школе, сто лет назад тоже составляет проблему, а реализация некоторых вещей подразумевают под собой знание школьной программы (вот мне и вышло боком моё утверждение в молодости, что математика в жизни не пригодится).
А анимацию хочу делать прямо сейчас.
Вчера узнал, что гринсок использует requestAnimationFrame, а я всегда что-то делаю на событиях mousemove и scroll. Извините, если что-то не так понял, и не так выразился, думаю, вы меня поняли. В общем, requestAnimationFrame будет более плавно работать, чем типичные, банальные самоделки на скролле.
У меня всегда было желание не использовать плагины, а учить, как что сделать самому, вникая в процесс. Но есть много вещей, которые я не могу реализовать, например, двойной параллакс, когда фоновое изображение имеет свой параллакс (уходит вверх), а наложенный сверху текст - в обратном направлении. Делать-то делал, но с косяками, в виде пустых пробелов над и под изображением. Не смог сделать плавную смену бэкграунда при скролле, чтобы изображения накладывались друг на друга, при условии, что фон будет меняться на элементе, с фиксированной позицией, имеющий 100% ширину и высоту экрана. И только при скролле на определённых участках высоты экрана. И такие тупики снова приводят к тому, что надо учить js. Учу - не учится, время идёт, демотивация, ступоры.. Но не суть.
Кто нибудь из серьёзных верстальщиков делает анимацию самостоятельно, вот чтобы без плагинов писать весь код с нуля? Разумеется, я понимаю, что иметь представление о том, что делаешь - обязательно. Как и понимать принцип работы animation.
Вопрос : нужно ли вообще заморачиваться над серьёзным изучением анимации, джаваскрипта, или же забить и учить документацию гринсок? Мне казалось, что уметь всё это делать самому - хороший скилл, уровень, да и вообще - это круто и правильно. И да, я понимаю, что когда времени нет, то многие юзают готовые плагины.
Что думаете? Как бы поступили вы в моём случае? Как делаете анимацию вы?
Кто нибудь из серьёзных верстальщиков делает анимацию самостоятельно, вот чтобы без плагинов писать весь код с нуля?
Да, вполне. Тут нужно понять такую вещь: есть задача и есть инструмент под задачу. Если вам нужно посадить кактус в горшок - экскаватор будет не к месту. И не всегда универсальный набор шестигранников подойдет под треугольный болт.
Вопрос : нужно ли вообще заморачиваться над серьёзным изучением анимации, джаваскрипта, или же забить и учить документацию гринсок?
Что такое GSAP? Ну вот без красивых слов? Это набор функций, решающих набор задач. А если у вас появится задача, на которую этот инструмент не рассчитан? Или задача, которую вообще никто еще не решал до вас, или готовые решения не подходят? Вы ничего не сможете сделать. Так что если вы хотите делать интересные вещи, которые выходят за рамки среднестатистического сайта, то ответ очевиден.
P.S.: И да, не зацикливайтесь на каком-то конкретном инструменте (например GSAP) только потому, что кто-то сказал, что это "стандарт". Всегда есть альтернатива. Например anime.js. То, что инструмент активно не развивается, не значит, что он вдруг перестал решать свою задачу. Старая добрая классическая zippo работала, работает и вас переживет.
Конечно юзать GSAP. Основная фича это TimeLine. Т.е. поддержка вашего кода в дальнейшем будет намного проще.
Например вам нужно выполнить последовательно 2 анимации.
Без GSAP:
Вручную ставите задержки, например, первая анимация длится 3 секунды, для второй вам нужно ручками прописать «начать анимацию спустя 3 секунды». Если время первой анимации изменилось, снова переписывать все delay. Представьте если у вас одна анимация состоит из 10 микроанимаций и на сайте несколько анимаций. В случае изменения чего-либо все тайминги считать заново и переписывать. А если по завершению анимации еще нужно что-то сделать, то это полный трешачёк.
GSAP
Вы просто говорите GSAP'у когда закончится первая анимация, начни вторую. Или начни вторую на пол-секунды раньше чем завершится первая. А когда анимация завершится полностью, открой мне попап, например.
Что касается изучения JS, в процессе работы и выучите, просто практикуйтесь как можно больше, а не думайте что же юзать. Берите GSAP и покоряйте.
Если ты хочешь делать анимации, то тебе придётся знать js. Т.к. по настоящему оживить анимацию, потребуются данные от пользователя, такие как длина скролла, позиция мыши на экране, статус загрузки элемента и т.п. Обычные анимации на css хорошо, но они лишины возможности получать эти самые данные, что бы анимировать что-то на нужное тебе кол-во пикселей(условно).
Что бы делать паралакс, нужно получать через js позицию курсора мыши или данные акселератора у устройства. Что бы элементы плавно выезжали при скролле, нужно получать данные у события scroll и т.п.
Всё это тебе нужно, если ты хочешь делать динамические анимации, которые меняются и работают в зависимости от действий пользователя.
В том-то и проблема, ибо js тяжело даётся. На базовом уровне я его знаю, но в качестве тяжёлой артиллерии в ход идут математика, тригонометрия, геометрия, и хорошее знание js. Вот и думаю, а нужно ли, или сразу юзать GreenSock и не тратить время.
А js буду изучать со временем
boga-net, GreenSock - это самая крутай либа для анимаций, что я знаю. Но и там нужны будут знания js + математика, пускай чаще всего и базовая. Так или иначе, тебе придётся учить js. Но для старта, делай на GreenSock так, как сможешь. Со временем ты начнёшь спотыкаться на не знании языка, а как следствие и дальнейшего создания анимаций
