01. Framer — Scroll-based анимация за 7 минут

Смотришь иногда на эти модные лэндосы и думаешь: «Эх, сколько же времени в объяснениях потратили дизайнер с разработчиком, выясняя что, как и куда должно двигаться. Да после такого они жить вместе начали». Ну так вот, теперь всё изменилось. И даже если Figma кряхтит, как старая бабка и отказывается сотрудничать, наш общий друг Framer поможет вам создавать даже самые сложные конструкты за 7 минут. А если набить руку, то и за 6. ———————————————————————————————— Так как Framer — top за свои бесплатные деньги, он позволяет пошарить с вами Remix-ссылку, чтобы вы могли скопировать проект к себе и потренироваться вдоволь: 1. Ссылка на первый урок с базовой анимацией → https://framer.com/projects/new?dupli... 2. Ссылка на продвинутый уровень → https://framer.com/projects/new?dupli... А ещё, Framer настолько крут, что позволил мне залить всё в веб одной кнопкой, только с мобилки не смотрите, я её не делал :) https://primary-power-293717.framer.app/ ————————————————————————————————— 0:00 О чём выпуск? 0:35 А в чём проблема с Figma? 2:14 Что такое Scroll-based анимация? 3:10 Добро пожаловать во Framer 3:31 Задаём базис 8:22 Sticky компоненты 10:02 Размечаем страницу 12:11 Связываем варианты и разметку 14:30 Настраиваем параметры анимации 16:19 А что если хочется посложнее? 19:15 Комплексная анимация 20:20 Демо результата (с debug) 22:18 Хотите ещё?