Крутая Lottie анимация в Тильде по скроллу (зеро блок тильда)
ฝัง
- เผยแพร่เมื่อ 16 มิ.ย. 2020
- Крутая Lottie анимация в Тильде по скроллу (зеро блок тильда)
Сегодня я расскажу и покажу, как работать с подобной lottie анимацией в тильде, на примере своей страницы и зеро блок тильда, а во втором видео мы с вами в Cinema4d заанимируем свой 3d объект, запихнем его на зеро блок тильда и получим такой же эффект, как на сайте эппл.
🦜Поддержать автора копейкой: www.donationalerts.com/r/swan4er
Ссылки:
Код для анимации в тильде: yadi.sk/d/sDUDmrNbafsTHw
База lottie анимации - lottiefiles.com/
Github - gist.github.com/
___________________________________________
✅Поделись видео с друзьями: • Крутая Lottie анимация...
✅Подпишись на канал и поставь🔔: / @design_scripts
Крутая Lottie анимация в Тильде по скроллу (зеро блок тильда)
___________________________________________
ВК: id117174434
Instagram: / bistricky_stanislav
Email: rootdesign.help@gmail.com
___________________________________________
теги:
#tilda, #тильда, #дизайн, #вебдизайн, #design, #тильдошная, #motilda, #zeroblock, #зероблок, #скрипт, #скриптынатильда, #tildaws, #тильдасайт, #tildazeroblock, #тильдаzeroblock
Случайно наткнулась на Ваш канал, я в восторге! В коде не разбираюсь совсем, а в видео все доступно и быстро. Благодарю, жду новых!
Это лучший ютуб канал который я только встречала по тильде. Спасибо Вам огромное, наслаждаюсь каждым видео, аж вдохновение приходит.
Офигеть, я и не думала, что можно сделать такую анимацию в тильде. Спасибо
Годно :) спасибо за видос, не думал, что на Тильде так можно.
Жду следующих видео!
Очень круто, спасибо) Как раз недавно задумался о том, что было бы круто сделать скрипт воспроизведения видео по скролу, чтобы получить эффект как у apple на сайте. Жду второе видео).
Я рад, что нашел твой канал. Больше видео с анимациями на тильде!
Кстати, спойлерю следующее видео)
Я нашёл способ обойтись без After Effects и плагина Bodymovin для создания 3d анимации в тильде по скроллу. Это поможет облегчить работу)
Скинь ссылку
Просто шикарно. Спасибо большое!
Отличный контент, первый раз вижу такое соотношение лайков, успехов!
Спасибо :)
Я сам удивлён. Это показывает, какая дружная аудитория у тильды)
Понравилось! Спасибо большое за технологию! У вас должно быть больше зрителей. Подписка.
Включаю режим ждуна xD
Жду следующее видео по анимации в зеро блоке
Дружище, очень полезно, продолжай. На ютубе очень мало подобного контента. В основном, все делают видосы по степ бай степ анимации или триггерной анимации)
Ну, это действительно круто! Браво!
Спасибо за комментарий) Поскольку на русском ютубе тема lottie анимиаций на тильде еще не поднималась, я решил сначала дать базу, показать, как это работает. В следующем видео мы уже не будем разбирать это так подробно, иначе оно выйдет слишком длинным. Готовьтесь скачивать after effects и cinema4d
Супер жду следующего видео по анимации в зеро блоке
Просто ахренительный контент! Спасибо за такие открытия)
Случайно наткнулся на Ваш канал)
Есть в планах видео с прелоудером?)
ПРОСТО ОФИГЕННО!!! Я по ходу сегодня не усну, пока все видео ваши не пересмотрю😛😜
Спасибо ютубу что порекомендовал твой видос, искал подобное решение. Лови подписку и давай продолжай подобный контент делать)
Вторая часть вот-вот на подходе. Спасибо за комментарий)
Мужик, респект тебе за Шеринг такой инфы
Вы крутой. Спасибо. Подписалась.
Спасибо за видео! Получилось!)
Лучший в этом виде спорта!!)
Боже, насколько Вы просто обьясняете. Лайк и подписка однозначно!
Спасибо)
Вам спасибо!
Дружище, жду второй урок , связанный с синимой, ты единственный, кто снимает подобные ролики. Посоветую тебя всем своим друзьям программистам!
Спасибо, ОТЕЦ, ты куда пропал? Уже 20 лет тебя с матерью ищем :D
А если без шуток, благодарю за комментарий. Вторая часть уже вот-вот на подходе
Да, видел этот сайт с ноутбуком apple на awwwards)
Спасибо, теперь могу повторить эту анимацию в зеро блоке на тильде
Отличное видео! Спасибо!
Тебе спасибо, что смотришь)
Балдёж. Спасибо.
Случайно увидел твои видео. Парень,ты супер!!!!
Спасибо 😊
Ты крут! Спасибо!
Спасибо! Классный канал!
Чисто случ почитал комменты и увидел твой, огонь контент) я ленивый сайтодел, мне нужен готовый код и чтоб работало ))
видел, что в webflow можно сделать такую анимацию. Не думал, что на тильде тоже получится так легко
Красавчик, лайк и подписка!
Спасибо, приятно, буду стараться дальше и делать ещё лучше)
Спасибо огромнейшее😍😍🤩🤩🤩
ты самый лучший!
Я уже попробовал эту анимацию в тильде у себя, все получилось с первого раза
ВОООУ! Шикарный канал!
Спасибо, стараюсь :D
смотрю видео 10 сек и сразу же решил поставить лайк и подписку
Приколдесно
Станислав! Вы меня в который раз восхищаете)) передо мной стоит задачка: создать 3д модель, которая потом должна разлетаться на части. Я моделю в 3ds max, вижу она схожа с 4d sinema, но вот размышляю, расширение файла позволит перенести анимацию в After Effects? и здесь у вас код именно при анимации при скролле? или это не важно?
Пушка!!
Бро, ты умничка, подписон, респект, обнял
Обнял в ответ
Огонь
Станислав... ты топчик !!!
Нет, это ты топчик! :D
Круто чувак, жду ролики!
Спасибо за комментарий, следующий на подходе)
Привет видео супер. Большая просьба заливай коды не только на Яндекс диск но и на Гугл диск, как альтернативу.
Каналу желаю развития
Стас, отличный видос, спасибо ! Не совсем понятно, откуда взялся коротки код для вставки в zero block, если на предыдущем шагу мы сохранили длиннющий код из лоти и длиннющий адрес адресной строки?
огонь
Пушка
Genio 😊
Стас, привет.
А ты мог бы потом как сможешь и будет желание показать как можно делать такую анимацию: например - открывается ноутбук, к нему приближается камера (это все понятно, просто анимация в синьке), а как потом находящееся у него на экране преобразовать в страницу сайта, чтобы она как бы дальше просто прокручивалась как сайт. Опять таки эффект эпл)
Если кто то ищет решение, как сделать, чтоб анимация начала воспроизводиться не в начале, а где-угодно на странице, то необходимо добавить условие в этот кусок кода
$( window ).scroll(function() {
if ($(this).scrollTop() > количество пикселей) {
animatebodymovin(animDuration, anim);}
});
где количество пикселей - это значение, например 1500 или 3000 , а затем это же значение нужно вычесть из переменной показывающей положение скролла, чтоб анимация воспроизводилась сначала
var scrollPosition = theWindow.scrollTop()-количество пикселей;
Всем Удачи!
А как сделать так, чтобы на разных экранах было начало анимации с разного количества пикселей? может в процентах или как?
Боже, я искала решение своей проблемы пол дня, и никак не ожидала найти решение в комментариях на ютубе) Спасибо большое!
@richman_777 Ростислав, простите, немного не поняла, если в коде в строке var scrollPosition = theWindow.scrollTop() ничего нет, то в скобках что нужно поставить, отрицательное значение? Пробую по всякому, анимация просто не проигрывается, не получается сделать так, чтобы объект приехал на экран целиком и после этого начал крутиться по скроллу. Буду очень признательная за помощь🙏
Очень круто!!скажи пожалуйста можно ли в тильде сделать анимацию типа вот ты дошел до блока и как только начинаешь скроллить на том же самом месте меняется текст и графика, насколько я понимаю это только с помощью кода можно сделать? Подскажи плиз, буду очень благодарна
Супер! Есть вопрос. Делаю прелодер, соответственно мне нужно просто проиграть анимацию. Использую файл с кодом для просто анимации. Все заработало, но анимация огромная, и я не понимаю, где задаются размеры анимации? В лотти я поставил размеры анимации нужные мне, но это не помогло. Размер ХТМЛ в зероблоке тоже нужный мне (250х250px). Всю голову сломал, что не так =)
Большое спасибо за урок, долго искал что-то подобное! Единственное, вы не подскажете, как сделать, чтоб анимация начиналась в середине страницы? У меня блок не в шапке, и когда докручиваю до него, анимация почти заканчивается. Спасибо)
Супер! Хотелось бы видео о размещении lottie анимаций в зеро блоках (так чтобы анимацию можно было поставить в конкретное место) и последующей адаптации под другие брейкпойнты
Двигай html элемент внутри зеро блока. Анимация привязана к нему)
Бро.
Надо сделать видео про загрузку сайта! Покажи кастомные загрузки страницы.
Эта тема не расскрыта.
Ты про это? Видео по этой теме будет обязательно)
tildoshnaya.com/modification/preloader
Очень полезно, спасибо! А есть возможность обойтись кодом только в блоке с html в зиро блоке? на бесплатном аккаунте нельзя добавить блок html на главной
Привет! Подскажи, каким образом можно использовать 2 лотти анимации на странице, например для мобилки одна, для деска другая? Если продублировать блок с кодом, указать новый путь и класс, то у меня перестает работать деск и заводится только мобилка.
Аналогичный вопрос! Кажется будто скрипт в коде противодействует друг другу и работает только одна анимация. Как решить данную проблему?
А можно ли записать json-анимацию в переменную и использовать ее, вместо того чтобы грузить json файл на хост?
Возможно ли сделать прозрачный фон у lottie-анимации?
можно ли как то адекватно комбинировать разные асеты?с анимациями на одной странице?
Добрый вечер! Во-первых, спасибо Вам большое за такой большой труд! Вы большой молодец и мы уверены, что Вас ждёт успех, продолжайте в том же духе - очень полезный контент.
Однако, вопрос - как добавить две подобные анимации. Мы пробовали - если добавлять вторую анимацию, то первая пропадает. Мы указываем lotti-2 везде, но ничего не меняется. Как нам решить задачу?
Добрый вечер, напишите, пожалуйста, в вк или инстаграм, я отправлю готовое решение :)
@@design_scripts, спасибо большое, Вам напишут!
@@design_scripts да чё уж там, и мне тоже решение захотелось) А ещё как сделать что бы блок с анимацией можно было бы поставить не в самом начале страницы а где нибудь по середение? А то если просто опустить блок то не работает больше.
Классно! А как с этим кодом в редимаге работать?
Подскажите пожалуйста! Реализовал лотти анимацию с открывающимся ноутбуком, все работает когда zero блок с кодом стоит в самом вверху сайта (первый по счету), когда опускаю блок на на 2000-3000 px ниже, ничего не работает, пытался соответственно менять значения GRID CANTAINER и DISTANCE (HTML блока), но безрезультатно, подскажите в чем дело? Какие настройки я забыл изменить? Заранее благодарен
Огосики
Сам в шоке :D
Автор жив?:) Ждем продолжения
Автор жив и уходить пока не планирует)
Заказов свалилось уйма. Постараюсь не пропадать
@@design_scripts это хорошо :) видосы все сижу жду, годные вещи показываешь
у меня наоборот окно, без заказов. Сижу языки изучаю да анимацию тестирую :)
Почему сейчас не работает скрипт по скроллу? Делаю все по инструкции. При этом обычная анимация работает без проблем.
Забыл поменять скрипт в html элементе. Поменяй, и все заработает
Все было понятно до 4.36. Какой «вот этот вот код» нужно скопировать?
Привет, половина видео в ограниченном доступе, будет ли возврат видео?
нужен документ для анимированного фона с частицами(
и вообще столько полезных фишек хотела взять из других видео и не успела(
Поменяю превьюшки, уберу значок Тильды и снова открою доступ. А то юристы Тильды взъелись
@@design_scripts спасибо за ответ) буду ждать, уж очень полезные у вас уроки)
Жесть как круто. Блин но только ведь надо вставлять через язык программирования. А этого я не знаю☹️
Я стараюсь делать видео, чтобы можно было просто повторить мои действия и получить результат)
Будут проблемы - пиши в вк, постараюсь помочь.
Также могу скинуть ссылку на классный курс по вёрстке. За пару вечеров разберёшься в основных моментах
@@design_scripts Привет) можно, пожалуйста, ссылку на этот курс?🥺
Здравствуйте. Как сделать так в Зеро Блок, чтобы плавная анимация при скролле не начиналась сначала после перезагрузки страницы например посередине сайта?
Когда я перезагружаю страницу посередине сайта, то система думает, что это начало сайта, и воспроизводит анимацию по скроллу сначала.
Станислав, сколько стоит личное обучение ?
Личные обучения очень давно не провожу, курсов нет.
Могу помочь в формате консультации по заранее согласованным темам
Привет! подскажи, пожалуйста, как сделать так, чтобы анимация срабатывала, когда до неё долистываешь, у меня не в первом блоке, а в третьем на сайте, и она успевает прокрутиться ещё в невидимой зоне (срабатывает до того, как до неё успевают долистать)?
есть ещё момент -- у меня во всех последующих блоках анимация отваливается, можно с этим что-то сделать?
@@aleksey_ramazanov Привет, разобрался?
@@aleksey_ramazanov Нашли решение?
Станисоав, а можно каким то образом сделать так что бы данная фишка работала не только в начале сайта, но и в блоках посередине?
Не нашли решение???
@@user-um6nb5jb5f неа
Прием работает, если блок с анимацией первый, но если он посередине страницы анимация не работает.
Тоже такое было. Попробуйте перенести блок с кодом в самый низ страницы. Он должен быть ниже, чем блок с анимацией.
накинь компрессии на звук, и убери уровень шипящих
доброго времени суток) не подскажите сделала по уроку, получается первый раз после публикации анимация скролится как бы рывками, пропадает, появляется, а потом уже нормально
Напишите, пожалуйста, в вк или инстаграм с ссылкой на проект)
@@design_scripts Здравствуйте! У меня такая же проблема
Народ подскажите.
Использую SVG иконки, но на мобильной версии сайта все равно они получаются размытыми. Как сделать по-человечески?
Пиши в вк, постараюсь помочь
Привет! столкнулся с такой проблемкой - год назад делал по вашему примеру анимацию на сайте все работало супер, но тут нужно было внести правки на сайте и после публикации анимация исчезла (((( после долгих танцев с бубнами я понял что исчезает она после того как ее фиксировать. Тоисть когда я добавляю фиксированную позицию анимация исчезает, я ее убираю работает но быстро прячется при скроле(. не подскажете что можна с этим сделать ?
Уважаемый автор -почему-то на Вашей ссылке у всех образцов нет справа ссылки кода вообще а сразу скачать отсылают к регистрации со всеми реквизитами Как быть?
а на мобильной версии работает данная анимация по скролу?
Как добавить оффсет такой анимации?
Привет, ответь пожалуйста. Как вставить две гифки на один сайт чтобы они не ломали друг друга?
Напиши в вк. Я скину текстовый документ с кодом.
Заранее скажу, там костыли на костылях, так что не советую добавлять на страницу больше одной анимации)
А нет ссылки на страничку в тильде? Хотелось по скролить и посмотреть как себя ведет анимация на разных разрешениях.
Привет еще раз, наткнулась на странный баг, при быстрой прокрутке анимация накладывается на следующие блоки сверху, в чем может быть проблема?
Чот сложно. Там прям в Lottie есть «редактор», который минимально позволяет менять параметры анимации и, главное, генератор кода, который тупо вставляешь в Тильду и все работает.
Здравствуйте еще раз) Тильда заблокировала мой аккаунт, из за кода с Lottie анимацией, вот что пишет "Ваш аккаунт попал под автоблокировку ввиду размещения стороннего кода", я ничего не понимаю разве запрещен сторонний код?
Ответили мне, может кому будет интересно: "Обращаем ваше внимание, что на бесплатном тарифе и в течение тестового (бесплатного) периода на любом из предоставленных платных тарифов действует усиленная система защиты, и при попытке размещения стороннего кода или ссылки на сторонний ресурс, аккаунт автоматически блокируется."
Пишите в техподдержку. Сам с таким не сталкивался и те, кто мне пишет - тоже.
Возможно, система посчитала код вредоносным 🤷♂️
Хотя, это очень странно
Благодарю за полезное видео!
Но есть проблемка - анимация ВООБЩЕ не отображается. В чем может быть ошибка? (повторил два раза с разными анимациями - все, как у тебя на видео)
Привет, пиши в вк или инстаграм со скриншотами. Разберёмся)
У меня такая же проблема, вы нашли решение?
@@design_scripts огромно спасибо за отклик, Стас!) Пока записывал видео, чтобы тебе показать порядок действий обнаружил свою ошибку)))
Получилось! Правда анимация немного обрезана и внизу, но я так понял это опытным путем можно поправить.
Можно узнать, в чём же была ошибка?
Тут человек интересуется)
Tilda со скриптами один раз не задал имя анимации , второй раз вместо ссылки добавил код )
Здраствуйте! Можете написать код для анимации в Тильде, не открывает ссылку?
Автор, а не подскажешь, как отследить момент, когда анимация закончилась?
Добрый вечер. Подскажите кто-нибудь, пожалуйста. Как сделать так, чтобы анимация открытия ноута начиналась через 0,5 секунд, а не сразу. Делаю прелоадер на сайт с десктопом, вместо ноута. Но пока он подгрузится при первом открытии, уже половина анимации проходит. Спасите, помогите :) Где мне надо делей вставить?
Здравствуйте, не получается на сайте github открыть json, создал всё по инструкции, нажимаю raw, а там 404 error not found, что делать?
Вы еще не пробовали пройти тест на Lottie . Это пиздец какой то
пытаюсь сделать обычную анимацию по второму скрипту, ничего не получается. уже не работает?
не понятно от куда взялся в код для вставки в тильду
а что делать если у меня в header весь json код вываливается и как его скрыть?
Уверен, что всё делаешь правильно? В path нужно вставлять ССЫЛКУ с гистхаба, а не сам код
ммм, пасиба! вот только html код на платной версии........ :/
Очень крутое видео. Правда на сайте Lottie не могу найти URL и скопировать анимацию.
Ну, давайте вместе поищем. Мои контакты в описании к видео
@@design_scripts Тоже не могу найти этот URL,где его скопировать???
Заранее спасибо!
а где продолжение?
При копировании ссылки с сайта лотти открывается сама анимация, а не код от нее. Наживаю посмотреть код страницы, работаю с ним, и ничего не получается. Как решить?
10 раз сделал все как на видео. Появился первый кадр анимации, точнее ее фон, а сама анимация не работает((
Пиши в соцсети со скриншотами и ссылкой на опубликованную страницу, будем решать проблему