Анимация слайдера в Фигме: 4 крутых приема! Smart animate | Figma уроки

Поделиться
HTML-код
  • Опубликовано: 22 дек 2024

Комментарии • 83

  • @olegianito
    @olegianito 8 месяцев назад +4

    Как же долго я искал такого человека, который без ускорения видео покажет, как делать анимацию. Браво 👏

    • @Chyrkov
      @Chyrkov  8 месяцев назад +1

      Очень рад, что вы его нашли!😌

    • @DavidSilver-g3v
      @DavidSilver-g3v 2 месяца назад

      Поддерживаю

  • @РустамСмирнов-к3ю
    @РустамСмирнов-к3ю 9 месяцев назад +1

    Спасибо, за полезное видео. Всё представленные идеи были очень интересны.

    • @Chyrkov
      @Chyrkov  9 месяцев назад +1

      Спасибо, рад, что понравилось! ☺️

  • @veronikarubilina363
    @veronikarubilina363 3 года назад +4

    за третий слайдер отдельное спасибо!

    • @Chyrkov
      @Chyrkov  3 года назад

      Всегда пожалуйста!)

  • @АлександрЧабан-ъ5ч
    @АлександрЧабан-ъ5ч 3 года назад +1

    Здорово, Сергей ! Спасибо! Буду пробовать.

    • @Chyrkov
      @Chyrkov  3 года назад

      Спасибо за отзыв!) успехов вам!)

  • @Figma-o2h
    @Figma-o2h Год назад +1

    Я в шоці!!!! Я тільки починаю займатися дизайном, а в мене вже виходить крутий дизайн. Не думав, що вийде з першої спроби))) Тепер буду навчатися по вашим відео

    • @Chyrkov
      @Chyrkov  Год назад

      я дуже радий, що все виходить! дякую вам за відгук та бажаю успіхів у дизайні! а ще запрошую на свій курс з фігми, посилання в описі😜

  • @unhappyPlayer
    @unhappyPlayer 3 года назад +2

    Спасибо, очередная годнота
    Как раз искал примеры оформления анимации слайдера

    • @Chyrkov
      @Chyrkov  3 года назад

      огонь! рад, что вовремя записал) пользуйтесь)

  • @НатальяОвчинникова-х4д5н

    круто!) Огромное спасибо)))

    • @Chyrkov
      @Chyrkov  22 дня назад

      Пожалуйста!

  • @Justdoit-jx5jh
    @Justdoit-jx5jh 4 месяца назад

    Сергей,много нового от вас узнаю,но как новичку,очень бы хотелось узнать как подобное аннимации правильно вписать в полноценный проект сайта. То есть как реализовать это на отдельных блоках хотя бы одностраничного сайта,но полноценного. Может у вас уже есть такой урок?

    • @Chyrkov
      @Chyrkov  4 месяца назад

      Благодарю за отзыв! Да, вы можете просмотреть мой курс по фигме, ссылка есть в описании к видео. Там есть отдельный большой раздел по анимациям.

  • @kristinakalashnova6779
    @kristinakalashnova6779 Год назад +1

    Сергей, спасибо большое за интересный и полезный контент =) Всегда смотрю с удовольствием ❤

    • @Chyrkov
      @Chyrkov  Год назад

      Пожалуйста!☺️ рад, что нравится!)

  • @АнастасияМ-ю4е
    @АнастасияМ-ю4е 10 месяцев назад

    Супер, спасибо!

    • @Chyrkov
      @Chyrkov  10 месяцев назад

      Пожалуйста 🙂

  • @rustamkarim_
    @rustamkarim_ 3 года назад +2

    Полезно. Спасибо за время и опыт

    • @Chyrkov
      @Chyrkov  3 года назад +1

      Спасибо за ваш отзыв!)

  • @albertchereshko
    @albertchereshko 7 месяцев назад

    Обновлю здесь Спасибо!)

    • @Chyrkov
      @Chyrkov  7 месяцев назад +1

      успехов!)

  • @artemLitvind
    @artemLitvind 2 года назад +1

    Спасибо большое за видео!

    • @Chyrkov
      @Chyrkov  2 года назад

      Пожалуйста!)

  • @sergearamyan9764
    @sergearamyan9764 11 месяцев назад

    Спасибо вам большое

    • @Chyrkov
      @Chyrkov  11 месяцев назад

      Пожалуйста!)

  • @karinar869
    @karinar869 2 года назад +1

    Спасибо за видео :) пригодится в проекте

    • @Chyrkov
      @Chyrkov  2 года назад

      Пожалуйста!) Рад, что понравилось

  • @prostoychel370
    @prostoychel370 2 года назад +1

    Спасибо большое! Видео очень полезное, мне понравилось)

    • @Chyrkov
      @Chyrkov  2 года назад

      Спасибо за отзыв!) рад, что понравилось!)

  • @milamila3933
    @milamila3933 2 года назад +1

    Сергей, скажите пожалуйста, а как сделать так, чтобы менялось не только изображение на 3 слайде, но и информация рядом с картинкой?

    • @Chyrkov
      @Chyrkov  2 года назад +1

      Разместите текст вместе со слайдером в одном варианте компонента 😉

  • @arianaminosyan
    @arianaminosyan 10 месяцев назад

    Здравствуйте, можете сказать а как все жии салйды которые уже анимированные перекинуть в таплинк??

    • @Chyrkov
      @Chyrkov  10 месяцев назад

      Привет! Не могу подсказать, не пользуюсь этим сервисом

  • @experiment643
    @experiment643 3 года назад +4

    Спасибо большое за очередное интересное видео👍 смог бы показать интересную анимацию с зацикленным движением объекта на страничке без всяких на него воздействий, типо что тот происходит с объектом постоянно на страничке без твоего участия, при этом можно скролить всю страницу вверх иди вниз, а объект продолжает свои зацыкленные действия? 🙂

    • @Chyrkov
      @Chyrkov  3 года назад +1

      Привет!) Спасибо за отзыв!) думаю то, что тебе нужно можно сделать с помощью интерактивных компонентов)) посмотрим, запишу обзор)

  • @masha_uxui
    @masha_uxui 2 года назад

    Большое спасибо! Очень полезное видео.

    • @Chyrkov
      @Chyrkov  2 года назад

      Пожалуйста! Рад, что понравилось!

  • @mubstbeai
    @mubstbeai 2 года назад +1

    Интересует слайдер уже внутри сайта, как это сделать, подскажите пожалуйста.

    • @Chyrkov
      @Chyrkov  2 года назад

      Это нужно программировать либо собираться на nocode платформе типа Tilda или Webflow. Постараюсь записать видео!

  • @nataligraphic
    @nataligraphic 2 года назад +1

    Здравствуйте! Подскажите пожааалуйста как настроить автоматический слайдер внутри лэндинга💔? У меня возникает проблема - сделала слайдер, открываю прототип, чтобы посмотреть анимацию (present), хочу просколлить лэндинг вниз, чтобы посмотреть как все остальное смотрится, но анимация не дает сделать это т.е. автоматически возвращает наверх к слайдеру...

    • @Chyrkov
      @Chyrkov  2 года назад +3

      Думаю лучше сделать такой слайдер интерактивным компонентом (анимации через after delay, посмотрите мое видео про анимацию фона на сайте) и разместить его внутри лендинга.

    • @nataligraphic
      @nataligraphic 2 года назад

      @@Chyrkov спасибо🙏💕

    • @лиза-м1з5в
      @лиза-м1з5в 9 месяцев назад

      ​@@Chyrkovне работает совет

  • @shuttlemarket
    @shuttlemarket 2 года назад +1

    Все отлично. Как это все сверстать без верстальщика

    • @Chyrkov
      @Chyrkov  2 года назад

      привет! Без верстальщика это можно сделать на Тильде или Webflow.

  • @txn4203
    @txn4203 2 года назад

    очень класный видио базару нет братан

    • @Chyrkov
      @Chyrkov  2 года назад

      Спасибо бро!))

  • @orhandavud9759
    @orhandavud9759 Год назад +1

    Привет, у меня при нажатии на кнопку изображение не выезжает как у вас, просто одно изображение гаснет, а другое вместо него появляется, делаю все точно как у вас

    • @Chyrkov
      @Chyrkov  Год назад

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

    • @user-vl9bt9dl8j
      @user-vl9bt9dl8j Год назад

      @@ChyrkovЗдравствуйте!У меня такая же проблема с первым слайдером,меняются просто изображения,но картинки не выезжают.Можете подсказать,что не так?

    • @Chyrkov
      @Chyrkov  Год назад

      @@user-vl9bt9dl8j привет! Мог предположить, что картинки не были спрятаны то есть выдвинуты за границы фрейма. Очень важно создавать не новые картинки, а двигать именно те что были на предыдущем слайде (то есть на первом оригинале)

  • @julia_389
    @julia_389 Год назад +1

    Как вы сделали темный фон?? У меня получается поменять только тему, но там темнеют только боковые панели, а фон остается белым. Уже глаза болят, когда пытаюсь понять, где края фреймов😂

    • @Chyrkov
      @Chyrkov  Год назад

      Фон рабочей области? Просто нажмите в пусто месте чтобы не выделять никакие объекты, справа в панели редактирования, где обычно показываются размеры объекта появится опция замены цвета фона😉

    • @julia_389
      @julia_389 Год назад +1

      @@Chyrkov Нет, мне именно фон за монтажной областью. Все, что вокруг фрейма. Цвет фрейма я умею менять)

    • @Chyrkov
      @Chyrkov  Год назад +1

      Все верно понял) фон рабочей зоны. Кликните на пустом месте и справа сверху будет опция замены цвета (режим design, чуть ниже)

  • @НаталіяВасилівна-е9у

    Сергей, объясните пожалуйста, зачем сдвиг с пробелом. Не поняла, что он делает. Спасибо!

    • @Chyrkov
      @Chyrkov  2 года назад +2

      Пробел нужно зажимать, чтобы объект который вы передвигаете за границы фрейма остался внутри этого фрейма, а не выпал из него 😉

    • @НаталіяВасилівна-е9у
      @НаталіяВасилівна-е9у 2 года назад

      @@Chyrkov Спасибо!

  • @ОрловИлья-п6ъ
    @ОрловИлья-п6ъ 3 года назад +4

    Сергей, спасибо! Как обычно, лайк ) Поставил бы второй за "сдвиг с пробелом", если б мог ) Возник вопрос, как работает смарт анимация. Я думал, что она вычисляет где раньше находился объект и как он выглядел, и где он теперь и каким стал, уже на основе этих двух точек делает плавный переход скажем так из пунта А в пункт Б. Но ты перетаскиваешь картинку так, как будто показываешь фигме, как ей нужно перемещать картинку. Это случайность или так и есть, что фигма запоминает все движения по изменению картинки и воспроизводит их?
    Последняя анимация, классная, но на мой субъективный взгляд, тяжеловата для восприятия, я теряю фокус когда всё разом уезжает, возникает эффект, что все картинки сменились на новые, а не сдвинулись) Но механика реализации крутая, надо брать на вооружение)

    • @Chyrkov
      @Chyrkov  3 года назад +1

      Привет) спасибо за отзыв! Да ты все правильно говоришь) почему я так делаю? Все просто - мне так удобнее))) так я для себя понимаю какое будет движение и точно знаю куда и как будет происходить анимация. 4 слайдер, возможно) но я видел много таких таких примеров на драбббл поэтому решил поделиться))

  • @olenanovytska3303
    @olenanovytska3303 2 года назад

    Добрый день, а как этот слайдер вставить в лендинг? Отдельно работает.

    • @Chyrkov
      @Chyrkov  2 года назад

      Нужно его запрограммировать в коде или настройками конструктора)

  • @marytv2579
    @marytv2579 2 года назад

    Здравствуйте, подскажите, пожалуйста, бесплатный способ, как выложить видео из Фигмы непосредственно на беханс? Я записала видео при помощи обычно видеорекордера, но при размещении на Беханс, там оно слишком узкое.

    • @Chyrkov
      @Chyrkov  2 года назад

      Добрый день! Вы делали запись всего экрана? В блоке куда вставляете видео можно нажать стрелочки в правом верхнем углу, которые расширяют блок. Главное проверьте чтобы выше видео было более 1400px по ширине. Возможно это может. Ещё рекомендую выставлять видео через Vimeo.

    • @marytv2579
      @marytv2579 2 года назад +1

      @@Chyrkov спасибо, разобралась с Vimeo)

  • @frigl7921
    @frigl7921 2 года назад

    А пробел зачем нужен?

    • @Chyrkov
      @Chyrkov  2 года назад +1

      Где именно?

    • @frigl7921
      @frigl7921 2 года назад

      @@Chyrkov Сергей, приглашаю вас в нашу команду дизайнеров и айти🤝

    • @frigl7921
      @frigl7921 2 года назад

      Был бы рад видеть Вас)

  • @Dieltan
    @Dieltan 8 месяцев назад

    👍👍👍👍👍👍

    • @Chyrkov
      @Chyrkov  8 месяцев назад

      👌👌👌

  • @liliyaStorogenko-p9w
    @liliyaStorogenko-p9w Год назад +1

    Дякую. Українські дізайнери - супер !🔰

    • @Chyrkov
      @Chyrkov  Год назад

      дякую, дуже приємно!))) Згоден з вами!) Успіхів!)

  • @zagovormass
    @zagovormass 2 года назад

    Почему так лагает анимация?

    • @Chyrkov
      @Chyrkov  2 года назад

      Где и что именно лагает?

  • @РинаРоманова-я8с
    @РинаРоманова-я8с 2 года назад +1

    хотелось бы видеть создание анимации с 0

    • @Chyrkov
      @Chyrkov  2 года назад +1

      У меня на канале есть видео с анимацией с нуля)

  • @alexalex7273
    @alexalex7273 2 года назад +2

    Вот это басы на видео, невозможно же слушать. И музон закадровый, чтобы еще труднее слова было разбирать (

    • @Chyrkov
      @Chyrkov  2 года назад

      Спасибо за отзыв, учту! Но вроде пока больше никто не жаловался, может с настройками звука или эквалайзера что-то…