Как добавить анимацию из After Effects на любой сайт (SVG - Lottiefiles - html - Tilda - Zero block)
ฝัง
- เผยแพร่เมื่อ 3 ก.ค. 2024
- SVG Анимация из After Effects на Тильду (Tilda zero block) или в любой html документ без программирования и верстки с помощью lottiefiles.
Добавляйтесь в:
🔹 Инстаграм: / tony.yem
🔹 Behance: behance.net/tony_yemelyanov
Ссылки урока:
lottiefiles.com/
tilda.cc/ - Тильда
aescripts.com/learn/zxp-insta... - Zxp installer
Мой курс UX UI дизайна:
academy.yem.digital/
#Анимация #Lottiefiles #Tilda
Подробный урок о том, как веб дизайнеру добавить анимацию из After Effects на сайт, как сделать анимацию в ZERO BLOCK тильды с помощью lottiefiles и как перенести анимацию из After Effects в html. С помощью этого метода можно анимировать иконки, логотипы, прелоадеры и иллюстрации в After Effects, после чего добавлять эти векторные svg анимации в zero block тильды, в любой конструктор сайтов (где есть html редактор), или на любой ваш обычный сайт чтобы создать вау эффект от вашего дизайна.
00:00 - вступление
01:10 - варианты применения анимации
02:24 - обзор возможностей и ограничений lottiefiles
04:49 - что будем практиковать сейчас
05:27 - lottiefiles
06:59 - установка плагина в Ae
08:51 - настройка Ae
10:30 - создание анимации в After Effects
33:15 - Экспорт анимации из after effects на lottiefiles.com
37:20 - работа с анимацией на lottiefiles
42:17 - анимация в html документе
44:09 - lottiefiles в Zero Block Тильды
48:51 - финальный результат: анимация на сайте на Тильде
Самое огненное и подробное видео по анимации, что я встерчала! Спасибо тебе огромнейшее, Тони! Пойду творить шедевры)))
Огромное спасибо, все толково объяснил, слушать приятно! Однозначно лайк и подписка
Наконец-то нашел канал с годным контентом! Спасибо за подробный видеоурок
Блин, спасибо!!! Я так долго именно это искал!!! Классно объясняешь!!!
Какое классное видео! Прям кучу вопросов для себя закрыла!
спасибо за замечательный урок,продолжайте в том же духе!
Не, ну респект за твои видосы! Всё по делу, всё работает!
Большое спасибо за подобный контент!)
Большое спасибо за обратную связь )
Спасибо огромное!!!!..так долго искала информацию..а тут все понятно и наглядно.
Шикарный урок, просто отличный
Очень полезное для меня видео! Спасибо большое!
Вы нереально крут! Спасибо!
Спасибо огромное, искала 2 недели как сделать анимацию на тильде, без иконки загрузки видео из ютуба, даже моя преподавательница не смогла помочь)) я уже думала что пора смириться, но тут попалось ваше видео)
Благодарю за информацию ❤
Все получилось! Ты супер-учитель!
Спасибо, бро!
Пушка! Спасибо
Очень Очень полезно Спасибище !
Спасибо за оглавление! С меня подписка..)
Очень круто!!!
старик ты лучший!!
огромное спасибо!
Мой мир не будет прежним! Спасибо огромное за инфу!
Мужик ты крут!
Спасибо!!! 🔥
Спасибо!
Thank a lot!
крутяк
Если у кого-то плагины не работают, на 9 минуте решение, мне помогло. Спасибо!
👍👍👍
Видео записалось с подвисающей картинкой в некоторых местах, но к счастью совсем недолго, а все что надо видеть видно и главное слышно, поэтому уверен, что это видео отлично расширит ваши возможности в создании сайтов и пригодится в работе. А чтобы было удобно ориентироваться, оставляю временные метки 🙂:
00:00 - вступление
01:10 - варианты применения анимации
02:24 - обзор возможностей и ограничений lottiefiles
04:49 - что будем практиковать сейчас
05:27 - lottiefiles
06:59 - установка плагина в Ae
08:51 - настройка Ae
10:30 - создание анимации в After Effects
33:15 - Экспорт анимации из after effects на lottiefiles.com
37:20 - работа с анимацией на lottiefiles
42:17 - анимация в html документе
44:09 - lottiefiles в Zero Block Тильды
48:51 - финальный результат: анимация на сайте на Тильде
друг, что за трек на фоне играет?
@@nanofox6874 Я честно говоря сейчас уже не смогу вспомнить. Это один из треков ютубовской аудиотеки. Там есть фильтрация по жанру, настроению, инструментам и т.д. Вот ссылка, думаю, сможешь найти достаточно много треков в подобном стиле: th-cam.com/users/audiolibrary
Видео класс, очень хорошо объясняет, но то то у меня не выходит, наверное нужно старые версии After Effects пробовать.
подскажите как сделать тоже самое с 3д анимацией? Импортировал из с4д в ае, но лоттифайлс не видит ее
если делать баннер, то кнопку к баннеру можно добавить через лотти? типа как в adobe animate?
насколько гибко можно контролировать эту анимацию, если она должна динамически изменяться через javascript, в зависимости от ситуаций ?
Или она будто за стеклом и ничего с ней сделать нельзя ?
А оно сохраняет только в растровом формате? Как сделать так чтоб был векторный формат в итоге . Я сделал всё как в видео, но в итоге в лотти открываю и когда приближаю то вижу пиксели, хотя первоначально в AE работал с векторными фигурами. Подскажите, пожалуйста
Действительно полезный материал. Скачал, опробовал, все работает, вот только жаль, что не все эффекты поддерживает SVG формат. Например, хотел сделать так, чтобы один из элементов мелкой иллюстрации менял цвет в течении всего цикла, применил в AE Hue/Saturation, произвел рендер в Lottie, а он эффект этот не прочел. Пришлось смириться. Но сама фишка однозначно годная.
Выражаю свою благодарность автору.
Лайк. Подписка.
У тебя лицуха или пиратка была? У меня вот окошко не прогружается
@@hanagakiarasawa3171 pirate
@@neofolk что за сборка?
@@hanagakiarasawa3171 2019 года, кажется, уже и не вспомню, ибо уже давно сижу на лицензии.
Спасибо тебе, светлый человек!
Друзья, может, у кого тоже возникла такая проблема - при копировании кода анимации с сайта Lottie в файл ничего не сохранялось. Проблема крылась в кавычках - нужно их перепечатать (изначально с сайта идут наклонные, а должны быть прямые)
Привет!
я копирую код с сайта Лотти, переношу в свой html документ--все есть. Но если я открываю его браузером--ничего, никакой анимации, пусто.... Что делать-то? Спасибо
@@user-dc5ud1dt8z никакой анимации нет (у меня так тоже было), потому что код с ошибками :) Вероятнее всего, как раз, дело в кавычках
@@user-vz4mh3zd1f как выглядят прямые кавычки?))
@@user-dc5ud1dt8z а вы за это не волнуйтесь - просто замените все, что там прописаны, со своей клавиатуры - по сути, заново перепечатайте
С вашей клавиатуры они автоматически нормальными будут
Я не знаю, почему так, но часто такое наблюдаю (например, если из чата в Zoom копировать текст с кавычками, то при вставке в другое место они тоже будут косыми)
@@user-vz4mh3zd1f да, спасибо! Все получилось)
У меня вопрос если мы анимируем svg в афтер эффект и экспортируем то это уже видео или анимированное svg
а без всяких сторонних сервисов как сделать? имею ввиду без привязки к сторонним ресурсам
Спасибо за видео. Как эту анимацию сделать прелоудером ? Может есть код который зеро блок в прелоудер делает ?
Тони, привет, классная видео, ставлю лайк. У меня вопрос: А лоти не поддерживает АЕ 2021? на данный момент у меня именно он и плагин не синхронится...
Убедись что Ae у тебя на английском )
Здравствуйте, спасибо за урок! Подскажите, пожалуйста, можно и сделать лотти анимацию .json из фрагмента видео? Я попробовал, почему-то выгружает белый экран. Настройки видео 1920х1080 25 кадров.
этот способ подходит только для векторной анимации причем без сложных эффектов, никаких видеороликов и растровых изображений, никаких линз и прочих эффектов которые невозможно повторить в коде.
Спасибо за видео! плагин lottie files не видит композиции в after effects (все обновления установлены), как думаете6 в чем может быть проблема?
Подскажите, лотти не работает если применён экспрешн?
А можно ли сделать lottie анимацию не в начале страницы, а в середине в зеро блоке?
А как-то можно получить анимационный SVG файл анимированный из АЕ? конверт в бодимувен например? или какиим либо другим способом?
Добрый день, Тони! Спасибо за видео, смогли все установить, но рендер не заканчивается. Может вы сталкивались с такой проблемой. Компьютер с хорошими параметрами и с последней версией программами.
у меня почему то zxp installer не находит ae 2021, не подскажите, в чем может быть дело?
Появилась проблема, при экспорте в плагине лотти - ломается моя анимация, в прямом смысле, некоторые части элементов просто не отрисованы, с чем связано может быть?
На минуте 37:20 подскажите в какой раздел нужно зайти в ручную нажав на сайте лотти, если Лотти не фурычет в after effects?
Подскажите. Теперь этот плагин называется Bodymovin?
На фигме я так понимаю, такой вариант не прокатит?
Я экспортировал через bodymovin, но это был файл json. Мой клиент сказал мне, что ему нужен только SVG. Что я могу сделать? Этот плагин сохраняет тоже только json, да?
Я верно понимаю, что этот плагин возможно установить только на оф версию AfterEffects с Creative Cloud, да? Если без облака можно, то как?
Акак в гифку переводить, если там ограничение 150кб?
Посмотрела видео, что бы понять как сохранить анимацию из афтер эффектс в формате SVG, но так этого и не увидела...
как сделать distorted анимацию, как у вас в конце видео на имени стоит в нижнем правом углу?
На Тильде можно использовать html только в платной версии
Привет ! Почему когда я сохраняюсь после редактирования ! У меня нет анимации и после того как нажимаю опубликовать мне не предлагает придумать название сайта! Не работают даже стандартные анимации! В Общем сохраняюсь нажимаю выйти и код пропадает из прямаугольника что в центре!
А вы нашли решение? Столкнулась с такой же проблемой.
Очень годно спасибо. Скажите а как быть с зависимостями? Например я сделал индикатор который реагирует на ползунок.
Как сохранить зависимость этого проекта на сайт что бы на сайте двигать ползунок и получать изменение индикатора? Есть решение?
А как таким способом создать HTML5?
Нужно для баннеров
Ребят, у меня пиратка и окно Лотти не загружается. Кто с пираткой и у него все работает? Можете подсказать от кого у вас сборка или каким образом была произведена активация?
Пожалуйста, не судите что пиратка все дела, но я тупо не зарабатываю столько что бы мог оплатить лицензию.
LottieFiles у всех работает ? У меня почему-то не хочет видеть мио композиции
Че делать если у меня пиратка и окошко не прогружается?
Что то не работает в офишал Creative CC (((
Блин все отлично. Вот только вес плеера, который идет с JSON превышает 250кб. Сделал такой себе Прелоадер с JSON на 8 кб, а плеер к нему 250кб... В результтате сайт быстрее загружается, чем прелоадер
Если бы это было 10 лет назад - тогда да. Но на текущий момент не критично - это всего лишь 250кб. На фоне того веса которой есть у серьезного сайта или приложения - это вообще несущественно. Особенно если делать на сайте последовательную загрузку контента и не ставить плеер в первый экран - тогда вообще не повлияет на ощущение скорости загрузки сайта для пользователя, даже со слабым интернетом.
Огромное спасибо за видео, все понятно! Но Не могу загрузить код на Тильду 😭 сохраняю и после закрытия код пропадает. Что это может быть?
Html код в зеро блоках будет работать только по платной подписке.
44:15 (не обращайте внимания, я для себя)
Lottie очень плохо влияет на performance сайта, особенно мобильной версии, из-за огромного плеера на js. Может к кого-то есть идеи как улучшить скорость загрузки плеера?
Устновил, дургая проблема. Не видит композиции, когда хочешь вывести файл на сайт
th-cam.com/video/vQNDfFfUcOo/w-d-xo.html - это решит проблему
Nikita Kukolev у меня та же самая проблема возникла, долго пытался найти ответ. Пока проверить не могу, но я тебе верю, спасибо большое 👍
Nikita Kukolev а ты сам ответил на свой вопрос))
Вообще везде стоял русский, неужели из-за языка столько дыр образуется...
это хайди хо?)
Блин , плагин не видит мои композиции, что делать ?((
Так может быть если Ae не на английском
То же самое, вы решили проблему? как?
@@yemdigital То же самое, не видит! У меня Ае на немецком. У меня Stroke анимация, может сложно для SVG? да, пойду менять на английский, так даже удобней...
@@receptoris7316 Скорее всего проблема в том, что Ae не на английском. Со Stroke анимацией проблем быть не должно.
th-cam.com/video/vQNDfFfUcOo/w-d-xo.html - это решит проблему
Как бы делать анимации без плеера, походу только руками )
32:37 - в целом, достаточно интересно получается (нет)
релакс братан. Че такой натуженный
Очень много воды, все видео можно было сделать максимум на 10 минут
Спасибо, что не приложил ссылочку на скрипт, реклама обычная..бесполезное видео
Ударения в "плАгин" и "Эффкетс" режут уши пополам.