Внедрение SVG-анимации в Тильду

[@seva_petrov]

Чтобы SVG анимация срабатывала по мере того, как мы к ней доскроллим, нужно сделать несколько шагов: 1 шаг Назначить html элементу класс animstartsnew 2 шаг Установить html элементу анимацию - block on screen (просто установить, но не настраивать) 3 шаг Добавить скрипт $(window).scroll(function() { $(".t-sbs-anim_started").removeClass("animstartsnew", $(window).scrollTop()

[@artemvasilev9220]

Спасибо за прекрасный видос. И отдельное огромное спасибо за этот скрипт. Ты первый у кого мне удалось его найти. Все работает. Удачи и процветания.

[@alyonak3013]

За этот скрипт отдельное спасибо тебе, добрый человек!

[@arturishoev]

Не работает

[@polinavoropaieva8070]

@@arturishoev и у меня нет работает((((

[@juliaro4213]

Это шикарно! Спасибо большое, Сева!

[@seva_petrov]

Ееее ☺️

[@yaroslavasun]

Стисло та по суті!!! Спасибо огромное!!!!)) Благослови Вселенная таких людей, как этот автор!)))

[@maunt-e]

Побольше бы видео, про всякие плюшки в тильде₽

[@seva_petrov]

Буду стараться делать)

[@allanovichenko]

О, даже у меня получилось! Йоху, спасибо, Сева!

[@La_Comfort]

Вааау! Спасибо, особенное спасибо за информацию при скролле

[@Alina-tl9xu]

Сева, благодарю очень!

[@dmitrykand5142]

Вообще жара!!!🙌

[@АнастасияЖукова-г5э]

Крутяк! Спасибо, Сева!

[@aleksandraorlova3019]

Сева, огонь! Спасибо за новые знания и плюшки :)

[@seva_petrov]

Еее) рад, что полезно

[@max-vasilyev]

Севчик спасибо. Пишу коммент для продвижения канала:) у тебя классный материал, ждем еще видосов, лайки с нас:)

[@seva_petrov]

Спасибо ☺️

[@user-LidenBrock]

Огонь) возьму на заметку)

[@krasavchikova_olga]

Просто огонь!!! Спасибо!

[@dmytronalivko9437]

Отличное видео! Спасибо за топ контент👌🏻

[@seva_petrov]

Спасибо)

[@olgadmitrieva5771]

какая ламповая атмосфера)

[@seva_petrov]

Спасибо ☺️

[@seva_petrov]

Ееее 💡💡💡

[@Marina-Isaeva-web]

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

[@Cool2ra]

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

[@seva_petrov]

Код для воспроизведения анимации, если блок находится ниже на лендосе: Нужно задать класс HTML элементу - animstartsnew $(window).scroll(function() { $(".t-sbs-anim_started").removeClass("animstartsnew", $(window).scrollTop()

[@oleksandr_bezuhlyi]

Классная штука эта свг анимация. И у меня даже получилось её сделать! Но к сожалению только на главном экране. Скрипт для блока ниже почему-то не срабатывает(

[@ИринаБорисенко-р4к]

добрый день) у меня тоже почему-то не получается сделать не на главном экране, можете пожалуйста видео-дополнение записать?🙏🏻 было бы очень полезно!❤

[@m-mukhanov]

Отличное начало!) Успехов в дальнейших видосах. Инфа очень полезная 🔥

[@seva_petrov]

Спасибо большое ☺️

[@ИльяИванов-в2ю]

Шикарно

[@antonishanya]

инструмент отличный, спасибо большое! но есть вопрос: что делать с элементами, которые не на главном экране, а анимируются они сразу после открытия сайта? можно ли как-то настроить тригер element on screen для этого всего дела?

[@seva_petrov]

Спасибо большое тебе! Да, можно есть скриптец. Напиши мне - скину)

[@martazovilya]

Антон, подскажите, если Сева вам ответил, вы могли бы прикрепить скрипт сюда, в комментарии? А то Сева перестал отвечать(

[@karina.martazova]

Антон, могли бы вы мне скинуть скрипт, Сева не отвечает, а он мне очень бы помог🙏 напишите мне в телеграмм @wondwrkar , пожалуйста🙏

[@Bugrovstudio]

@@seva_petrov я бы тоже не отказался от скрипта)

[@yesmish7]

Все отлично. Только если ты упоминаешь какой-то сторонний онлайн сервис, то логично оставить на него ссылку под видео

[@seva_petrov]

Блин, точно! Извините меня неопытного ютубера. Щас поставлю

[@JuliaSuleimanova]

Спасибо, очень полезный урок!)

[@reality-channel8370]

Супер! подписка и лайки однозначно!!!

[@ОльгаЛукьянова-ы9о]

Супер!!! Давай больше видео про анимацию, очень полезно 🔥

[@seva_petrov]

Ееее. Сделаю. Засылайте темы ✨

[@ЛабораторияНовыхТехнологий]

@@seva_petrov Круто! В копилочку! Вот бы еще разобраться с вариативными шрифтами, как их внедрить в тильду. Типа такого deadsign.ru/tipografika/variable-fonts-past-present-and-future/

[@op_design]

Комментарий поддержки от братана для братана😎 Видюха прям ВАХ вышла🔥оч круто!!!

[@seva_petrov]

Спасибо сестра 🥰

[@diana_ilfarovna]

Спасибо за видео, пошла пробовать!😊

[@cats-hair-on-a-table]

спасибо! очень круто, полезно и понятно. лайк

[@seva_petrov]

Фух, ну главное, что понятно) Спасибо 🙏

[@vasto1]

Клёвый контент!!! Подписка - однозначно!)

[@pavelgaydukov]

Очень ценно! Благодарю ❤️

[@alexeybayanov2698]

А саму анимацию как сделали?

[@seva_petrov]

Анимацию на заставке? Или SVG анимацию?

[@acxatzhusupov]

@@seva_petrov саму анимацию в онлайн сервисе

[@acxatzhusupov]

Или это в фигме анимация была сделана?

[@VladMolodetskiy]

@@acxatzhusupov что?)))

[@acxatzhusupov]

@@VladMolodetskiy в чем вопрос?

[@LKWitch]

Поздравляю! Очень стильное видео по форме. По содержанию каждая минута интересна. Жаль, что всего 4 минуты! Да, и интересен был бы сам алгоритм настройки svg анимации😊.

[@seva_petrov]

Спасибо большое) Там все просто на самом деле. Регулировать можно только изинги. По сути вы выбираете только анимацию появления и ее длительность)

[@LKWitch]

@@seva_petrov как раз с изингами проблема. В Тильде по наитию настраиваю их. Нет четкого понимания😊

[@elenavakk]

А где кстати делается алгоритм? В фигме?

[@Dibka_podrujka]

Спасибо автору за полезные фишки! Но, сколько я посмотрел видео насчет анимации SVG в тильде, никто пока еще не показал как адаптировать анимацию под мобильные устройства!

[@oleksandr_bezuhlyi]

Благодарочка!💯👍 Ждём ещё таких классных видосов!

[@seva_petrov]

Спасибо) будет 🌞

[@ДарьяЛеонович-ь9з]

Супер! спасибо :)

[@Soper84]

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

[@julkashu]

Спасибо, реально полезный видос)

[@seva_petrov]

Спасибо 🙏

[@alenamaslova8958]

Вау, спасибо!))

[@АгатаМальцева]

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

[@vitori_top]

Обычно я не пишу коменты 😅 но это было круто! 👍🔥

[@seva_petrov]

Хехех) кайфы

[@pavelkorolev4575]

Кайф, спасибо

[@АнастасияЖукова-г5э]

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

[@seva_petrov]

Напиши мне в ТГ. Скину код ☺️

[@martazovilya]

Анастасия, подскажите, если Сева вам ответил, вы могли бы прикрепить скрипт сюда, в комментарии? А то Сева перестал отвечать(

[@warinucrain9823]

@@martazovilya Вам скинули код , можно мне тоже ?

[@karina.martazova]

Анастасия, могли бы вы скинуть данный код, очень нужно, вы бы мне очень помогли🙏🙏🙏, а то Сева не отвечает и нигде найти не могу( если вас не затруднит, напишите мне в телеграмм @wonderkar

[@поао123]

@@seva_petrov Можете тоже объяснить?

[@alenalastovko9305]

Отлично! Спасибо, Сева! Этот код мы можем вставить только в тильду? Он будет работать при вставке на самописный сайт?

[@alpastukhov]

Должен работать везде, т.к. сервис никак не связан с Тильдой.

[@romayakovenko]

🔥🔥🔥

[@bboy_dom]

пушка👍🔥

[@1974mura]

Кайфец, Сева

[@seva_petrov]

Ееее)

[@1974mura]

@@seva_petrov сделай видос с обзором своих любимых плагинов фигмы, а так же видосы с сервисами и лайфхаками для тильды

[@1974mura]

@@seva_petrov дикция хорошая, классно получается, но есть один нюанс, вот это ээээ все портит) могу подсказать фишку как это легко улучшить: вместо ээээ просто делай паузы, это не будет критично зато не будет эээ и качество вещания сразу улучшится и станет более профессиональным) я этот момент подслушал у инструктора по речи

[@seva_petrov]

@@1974mura очень дельный совет! Спасибо большое) надеюсь избавлюсь от этих паразитов 🥲

[@1974mura]

@@seva_petrov у тебя получится! Это у многих на ютубе такое и сразу впечатление портит, звучит очень аматорно, люди даже не знают что если немного подкрутить то уже будет звучать более профессионально.

[@themax1867]

Каеф.... 👍👍👍👍🔥🔥🔥🔥

[@seva_petrov]

💪💪💪

[@victordenisov8501]

Всё круто, только не понял, как была задана анимация текста и фигуры?

[@seva_petrov]

Обычные изинги ( появления) , там в самом сервисе есть пару десятков различных

[@maxvolgin4745]

После добавления кода анимации ничего не происходит (

[@ЯрославЛетний-э1н]

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

[@ВалераСергеев-ю5ж]

так для этого есть просто анимация тильды в настройках объекта

[@ЯчторЗябь]

вопрос не по теме, просто интересно, а шапка это обязательный атрибут дизайнера?

[@seva_petrov]

Да, голова мёрзнет)

[@HredFuzz]

А на редимаге так можно?

[@seva_petrov]

Везде так можно, где есть возможность вставки кода

[@komarovaeee]

Крутяк!

[@nekchich5565]

✌🏻

[@АРТПРОЕКТ-р7з]

+ подписка!

[@ВаняМалиш]

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

[@seva_petrov]

Там можно настроить только изинги) эффекты появления

[@Елена-у9о6м]

Кто знает как зациклить эту анимацию пожалуйста люди добрые

[@costa13play]

А как это дело адаптируется?

[@seva_petrov]

Очень просто. Если удалить высоту и ширину в коде, как я на видео показал, то можно просто изменять ширину контейнера с кодом и изображение тоже будет изменяться)