@PavelMelnik94

Как определиться с зависимостями лендинга?

Доброго времени суток.

Мой вопрос достаточно простой, а я не жду однозначного ответа как и зачем. Просто хочу послушать тезисно доводы людей с опытом.

Сам я фронтенд разработчик. Пишу на реакте
Моя девушка проходит довольно интересный курс по ux/ui, и по их программе, довольно скоро ко мне в руки попадет куча интереснейших макетов, которые нужно будет сверстать и запраграммировать. Часть из них останется в портфолио как примеры работ дизайнера(с пустыми ссылками и кнопками), какой-то станет её сайтом-портфолио, и какой-то моим :)

Пока ясно следующее: анимации будет крайне много. От кастомного курсора до игры с типографикой.

Пошерстив Гугл и телеграмм каналы, я нашел около 20+ библиотек для различной анимации.
Все они примерно похожи по апи, но по отзывам каждая лучше предыдущей.
Посмотрев в девтулзе аналогичные сайты, понял что они все как один используют некий GSAP.

почитал доку, попробовал ее в первом приближении - довольно сложно вот так сходу начать. Threejs тим паче.нужно что-то попроще.

Немного подумав, решил делать это все на реакте, т.к. он мне более менее знаком. Посмотрел framer-motion и вроде бы остался доволен, но стал вопрос юза реакта для лендинга.
Возможно, стоит поиспользовать некст или гетсби(ни с тем, ни с тем я не работал до этого).

Собственно вопрос: будет много разных сайтов. Не факт что все будут лендинги. Будет много анимации при скролле, переходах, и самих элементов. Будет очень много разных шрифтов. Хочу настроить некий стартер, в который сразу включу все необходимые либы, свою структуру папок и какие-то минимальные конфиги.
Какой стек библиотек поиспользовать для этого? И почему?

Updt: свое портфолио я точно буду делать на реакте. И раз уж я буду делать его и настраивать проект, то хотелось бы унифицировать это и под другие проекты. Получится ли?
  • Вопрос задан
  • 931 просмотр
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Смешались в кучу кони, люди, GSAP, React, Three.js... Стоит немного систематизировать инструменты хотя бы по задачам, которые они решают. Не привязываясь к конкретным фреймворкам из большой троицы, у нас есть несколько классов инструментов в теме креативных сайтов:

  • Про готовые CSS-анимации - animate.css, Wow.js, и.т.д. Там много динозавров из времен jQuery. Такие штуки часто бывают не в тему дизайна, но стоит посмотреть и забыть. Хотя для сайтов в духе дизайнерской дичи, вроде той, что успешно делают в студии Артемия Лебедева - может быть и ок.
  • Про интерполяцию всего и вся. Тут обычно выбирают между GSAP и Anime.js. Первый вариант - более замороченный, есть полезные плагины, второй - попроще, но тоже хорош, в некоторых кругах даже более популярен. Для совсем простых задач - можно свой инструмент написать.
  • Про скролл, в основном в контексте CSS-анимаций. Тут Locomotive Scroll рулит.
  • Про переходы между экранами. Грубо говоря прокаченный роутер. Самый популярный - Barba.js. Раньше еще был Highway.js, но в последне время что-то про него мало говорят.
  • Про экспорт готовых анимаций из софта для анимаций. Тут нужно отталкиваться от софта. Обычно вопрос возникает в контексте AE и простых мультиков - тут Lottie, говорят, неплох. Но нужно дизайнера заранее консультировать по теме, чтобы лишнего не намалевал.
  • Про визуализацию данных. Тут полезно знать про d3.js, в основном ради готовых примеров.
  • Про трехмерный WebGL, чтобы не писать все руками. Самый популярный вариант - Three.js, в основном за счет экосистемы и горы готовых решений, но есть и альтернативы на любой кус и цвет. Для 2D -эффектов вообще ничего не нужно в большинстве случаев.
  • Плюс не стоит забывать про всякие вспомогательные штуки вроде WebFontLoader, Hammer.js, LeaderLine, и.т.д. К анимациям они не относятся, но в работе могут быть полезны, чтобы не писать все самому.


Но самое интересное то, что эти инструменты не делают работу сами по себе. Они - лишь вспомогательные штуки, чтобы не писать самому некоторые шаблонные куски проектов. Очень часто можно заменить одно на другое в рамках конкретного класса задач и сложность конечной работы, которую нужно сделать, не изменится никак, потому что реальная сложность заключается в необычной верстке, где нужно сначала понять, что там вообще нужно сделать, а как именно - уже не важно, в хитрых математических расчетах, в адаптивности, где нужно впихнуть невпихуемое, в вопросах доступности в контексте конкретного дизайна, в производительности и способности предотвратить проблемы с ней еще на этапе дизайна, в исправлении проблем кроссбраузерности, которые появляются совершенно внезапно, и.т.д. Эти вещи не особо автоматизируются.

А вообще угадать весь стек на много проектов вперед с первого раза, не имея ни малейшего представления о том, что там будет нужно, а что нет, скорее всего все равно не получится, так что может быть стоит попробовать разное в разных проектах (тем более речь идет про некоммерческие проекты, можно себе позволить), и посмотреть на то, какие вообще варианты бывают в разных классах задач, и что они помогают делать, а что - нет.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@PavelMelnik94 Автор вопроса
Всем спасибо. Кто тоже столкнулся с подобным обилием выбора, скажу, что мой выбор пал на: nextjs, styled component, locomotive scroll, framer motion, и adobe after effect для прелоудера и гиф
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы