Создание потрясающих анимаций прокрутки в Figma ✦ Creating Stunning Scroll Animations in Figma

[@eva_masson]

Наконец-то! Хоть кто-то объяснил, как можно делать подобные анимации в Фигме) Спасибо большое!
Жаль, конечно, что пока только через костыли. Надеюсь, Фигма расщедрится и добавит в следующем каком-нибудь обновлении When scroll

[@halolabtv]

Спасибо вам за обратную связь! Рады помогать :)

[@olgaprishivalko1047]

Ура! Такой ценный урок! Спасибо большое. Давно слежу за работой halolabteam, Ваш дизайн узнаю среди тысячи! А тут ещё такой годный материал на ютубе!

[@_material_girl]

Аааа, спасибо!!!!!! Реально первое видео, где объясняется как анимацию переносим в макет!

[@patryhofficial]

Блин с Difference прикольно придумал взял на заметку.

[@thaiwithme9879]

огонь!! очень понравилась лекция!! делайте побольше такого контента! вы крутые, ребята!

[@siadsgn]

это самый адекватный урок по анимации в фигма, еще не видела, чтобы кто-то использовал именно вариативность компонентов и смарт анимейт, просто облегчил жизнь мне :)

[@maisjandesign]

Рады помогать)
У нас еще много полезного на канале

[@helgasheretovich5989]

Супер контент!!! Спасибо!!! Ответили на вопросы, на которые не могла найти ответа!!!))) Пожалуйста, больше такого контента😊🙌🙌🙌🙏🙏🙏

[@kseniashabanova4220]

Привет! Впервые, кажется, комментирую видео на ютубе. Супер полезный ролик, спасибо большое!!!

[@maisjandesign]

Спасибо, приятно читать такие комментарии🖤

[@anton_youtube_1]

Офигенный урок, спасибо большое!

[@dasktown6969]

Вы потрясающий !)

[@bisiyahaya6142]

Wow this is one crazy animation 💯👍

[@MrHoma94]

Очень круто мужик! Спасибище!)) Почти сайт Apple🙂

[@rybka_moya]

Спасибо! Интересно и полезно

[@rusfungame]

Thanks for lessons

[@alex_massa]

👏🤝👍

[@bigbanan4184]

Спасибо, я точно узнал больше о фигме

[@artemasoap]

Взрослая канитель!!!

[@mirofficial1049]

как понять, что ты связь на параллакс делаешь on click? типа этот параллакс происходит после клика что ли? Но ты же скроллишь? Короче как сделать так, чтобы у меня на всём лендинге работал параллакс во время скролла?

[@maisjandesign]

Это имитация скролла. К сожалению у фигмы нет пока анимации на скролл.

[@andremin]

Как делать анимацю на кнопку в шапке ? При скроле чтобы опускалась до нужного блока а кнопка меняла цвет?

[@maisjandesign]

попробуйте этот урок ruclips.net/video/piZlQbjK2LA/видео.html

[@Mikl07]

Но в итоге получилась анимация не при скролле, а при клике( Или просто потом когда передаем верстальщику то говорить что это при скролле? А то вы сказали что надо уточнить, что это именно при клике

[@maisjandesign]

Верно, видео так и называется «анимация скрола» а не при скроле. К сожалению скрола в фигме нет, а для верстальщика это визуализация интерактива и анимаций 😊
Выше так же ответил)

[@Mikl07]

@@maisjandesign спасибо большое)

[@ДенисПиксель]

Спасиб😂

[@Emmilien_]

Ребята, привет! Спасибо вам за урок! Скажите, пожалуйста, почему после завершения анимации меня перекидывает на первый экран вместо того, чтобы оставаться там, где я кликаю? Я делала по вашему видео клик для горизонтального скролла, но меня перекидывает на первый экран зачем-то

[@tapcryptonow]

Подскажите, если делать такую анимацию к примеру в principle, насколько это имеет смысл? Спрашиваю, чтобы понять, что лучше учить) спасибо

[@maisjandesign]

Принцип анимации практически одинаковый. Но лучше учить фигму так как все собрано в одном месте

[@andrewhoang8611]

то есть это не анимация скролла. а анимация при клике. будет ли проблема у верстальщика? ведь нужно сделать анимацию при скролле

[@maisjandesign]

Верно, видео так и называется «анимация скрола» а не при скроле. К сожалению скрола в фигме нет, а для верстальщика это визуализация интерактива и анимаций 😊

[@alenaarkhipova4431]

Урок супер. Подскажите, пожалуйста, есть ли возможность настроить difference эффект так, чтобы при попадании текста на цветной фон/фотографию он был белого или черного цвета, а не инвертирован? Или может знаете плагин решающий эту проблему? Никак не могу найти решение

[@maisjandesign]

Если вам нужна фиксация и анимация то только такой сложный вариант имитации. Или же с помощью маски, если вам не нужна анимация

[@Gesarim]

А линию как анимировать при скроле?

[@maisjandesign]

Через маску или фрейм

[@СобакаУлыбака-т1в]

Не понимаю почему у меня два слоя цвета над кнопкой сливаются в один и получается при наведении верхний слой просто накрывает кнопку? то есть я делал два слоя цвета над кнопкой, а едет при ховере один

[@maisjandesign]

Вы оба слоя смещали с разной дистанцией в первом состоянии?

[@СобакаУлыбака-т1в]

@@maisjandesign а какая дистанция должна быть у двух этих слоев? В макете просто один над другим

[@maisjandesign]

Какой таймкод? Так могу точнее понять и подсказать

[@СобакаУлыбака-т1в]

@@maisjandesign а эти два слоя как надо размещать? Строго один под другим или нижний должен вылезать?

[@guess1154]

@@maisjandesign начиная с 10:13, такая же проблема

[@manulisch]

подскажите, пожалуйста, как видео вставили такое?

[@maisjandesign]

Figma поддерживает gif формат. Так что можно ставить гифку и в превью оно будет проигрываться

[@ptrworship]

Фигма уже поддерживает небольшие по размеру фрагменты видео 🙌🏻😁 ура

[@AnnyFanny85]

а как сделать анимацию именно по скролу а не клику ?

[@maisjandesign]

Такой функции пока нет в Figma