Создание потрясающих анимаций прокрутки в Figma ✦ Creating Stunning Scroll Animations in Figma
HTML-код
- Опубликовано: 10 май 2022
- Семинар рассчитан больше на дизайнеров, потому что вы сможете повторить все шаги шаг за шагом во время просмотра видео, а также получите домашнее задание. Но разработчикам и менеджерам также будет интересно понять процесс и функциональность анимации.
Вы узнаете, как:
- создавать анимации;
- делать живую презентацию своего дизайна;
- быть более понятным для клиента в его идеях;
- создавать WOW-эффект :)
- стать ближе к figma.
Ссылка: www.sendpotion.com/
Ссылка на макет: www.figma.com/file/8EURLXNWYY...
**********************************************************
The workshop is designed more for designers, because you will be able to repeat all the steps step by step while watching the video, and then you will also get homework. But developers and managers will also be interested in understanding the process and functionality of animations.
You will learn how to:
- create animations
- make a live presentation of your design
- be more clear for a client in his ideas
- make WOW effect :)
- get closer to figma
Reference: www.sendpotion.com/
Layout link: www.figma.com/file/8EURLXNWYY...
**********************************************************
● Website - www.halo-lab.com
● Instagram - / halolabteam
● Dribbble - dribbble.com/halolab
● Behance - www.behance.net/halolab
Наконец-то! Хоть кто-то объяснил, как можно делать подобные анимации в Фигме) Спасибо большое!
Жаль, конечно, что пока только через костыли. Надеюсь, Фигма расщедрится и добавит в следующем каком-нибудь обновлении When scroll
Спасибо вам за обратную связь! Рады помогать :)
Ура! Такой ценный урок! Спасибо большое. Давно слежу за работой halolabteam, Ваш дизайн узнаю среди тысячи! А тут ещё такой годный материал на ютубе!
Аааа, спасибо!!!!!! Реально первое видео, где объясняется как анимацию переносим в макет!
Блин с Difference прикольно придумал взял на заметку.
это самый адекватный урок по анимации в фигма, еще не видела, чтобы кто-то использовал именно вариативность компонентов и смарт анимейт, просто облегчил жизнь мне :)
Рады помогать)
У нас еще много полезного на канале
огонь!! очень понравилась лекция!! делайте побольше такого контента! вы крутые, ребята!
Супер контент!!! Спасибо!!! Ответили на вопросы, на которые не могла найти ответа!!!))) Пожалуйста, больше такого контента😊🙌🙌🙌🙏🙏🙏
Привет! Впервые, кажется, комментирую видео на ютубе. Супер полезный ролик, спасибо большое!!!
Спасибо, приятно читать такие комментарии🖤
Очень круто мужик! Спасибище!)) Почти сайт Apple🙂
Офигенный урок, спасибо большое!
ААА спасибо :) Наконец то кто то объяснил. спасибо :)
Вы потрясающий !)
Wow this is one crazy animation 💯👍
Спасибо! Интересно и полезно
👏🤝👍
Thanks for lessons
Спасибо, я точно узнал больше о фигме
Взрослая канитель!!!
как понять, что ты связь на параллакс делаешь on click? типа этот параллакс происходит после клика что ли? Но ты же скроллишь? Короче как сделать так, чтобы у меня на всём лендинге работал параллакс во время скролла?
Это имитация скролла. К сожалению у фигмы нет пока анимации на скролл.
Как делать анимацю на кнопку в шапке ? При скроле чтобы опускалась до нужного блока а кнопка меняла цвет?
попробуйте этот урок ruclips.net/video/piZlQbjK2LA/видео.html
Но в итоге получилась анимация не при скролле, а при клике( Или просто потом когда передаем верстальщику то говорить что это при скролле? А то вы сказали что надо уточнить, что это именно при клике
Верно, видео так и называется «анимация скрола» а не при скроле. К сожалению скрола в фигме нет, а для верстальщика это визуализация интерактива и анимаций 😊
Выше так же ответил)
@@maisjandesign спасибо большое)
Спасиб😂
Ребята, привет! Спасибо вам за урок! Скажите, пожалуйста, почему после завершения анимации меня перекидывает на первый экран вместо того, чтобы оставаться там, где я кликаю? Я делала по вашему видео клик для горизонтального скролла, но меня перекидывает на первый экран зачем-то
Подскажите, если делать такую анимацию к примеру в principle, насколько это имеет смысл? Спрашиваю, чтобы понять, что лучше учить) спасибо
Принцип анимации практически одинаковый. Но лучше учить фигму так как все собрано в одном месте
то есть это не анимация скролла. а анимация при клике. будет ли проблема у верстальщика? ведь нужно сделать анимацию при скролле
Верно, видео так и называется «анимация скрола» а не при скроле. К сожалению скрола в фигме нет, а для верстальщика это визуализация интерактива и анимаций 😊
Урок супер. Подскажите, пожалуйста, есть ли возможность настроить difference эффект так, чтобы при попадании текста на цветной фон/фотографию он был белого или черного цвета, а не инвертирован? Или может знаете плагин решающий эту проблему? Никак не могу найти решение
Если вам нужна фиксация и анимация то только такой сложный вариант имитации. Или же с помощью маски, если вам не нужна анимация
подскажите, пожалуйста, как видео вставили такое?
Figma поддерживает gif формат. Так что можно ставить гифку и в превью оно будет проигрываться
Фигма уже поддерживает небольшие по размеру фрагменты видео 🙌🏻😁 ура
Не понимаю почему у меня два слоя цвета над кнопкой сливаются в один и получается при наведении верхний слой просто накрывает кнопку? то есть я делал два слоя цвета над кнопкой, а едет при ховере один
Вы оба слоя смещали с разной дистанцией в первом состоянии?
@@maisjandesign а какая дистанция должна быть у двух этих слоев? В макете просто один над другим
Какой таймкод? Так могу точнее понять и подсказать
@@maisjandesign а эти два слоя как надо размещать? Строго один под другим или нижний должен вылезать?
@@maisjandesign начиная с 10:13, такая же проблема
а как сделать анимацию именно по скролу а не клику ?
Такой функции пока нет в Figma