Как добиться эффекта рисования SVG кривых на Tilda

Друзья, в этом видео я показываю как добиться эффекта рисования кривых SVG при сборке вашего сайта на Tilda с помощью JavaScript кода, Figma и ZeroBlock.
Я подготовил три варианта кода:
Рисование по скролу
Рисование по временному триггеру
Рисование по элементу - триггеру
Вы можете сказать мне "спасибо" на с помощью сервиса boosty boosty.to/ohmy...
Ссылка на код: codepen.io/Max...

[@mariamfine308]

Друзья, у меня 2-ой код не работал, поэтому я его откорректировала. Кроме того, мне нужно было, чтобы он рисовался сверху вниз, а не сбоку (у меня получалось, что данный код (исправленный) рисовал снизу вверх. Если у кого-то такая же проблема с кодом - вот мой код. Вдруг, кому-то окажется полезным document.addEventListener('DOMContentLoaded', function() { const svg = document.querySelector("#svgPath"); const length = svg.getTotalLength(); svg.style.strokeDasharray = length; svg.style.strokeDashoffset = length; window.addEventListener("scroll", function () { const scrollY = window.scrollY || window.pageYOffset; const scrollPercent = scrollY / (document.documentElement.scrollHeight - window.innerHeight); const draw = length * scrollPercent * 1.5; svg.style.strokeDashoffset = draw - length; }); });

[@madinasharafutdinova5235]

спасибо :)

[@ИгорьИгоревич-м5к]

Делаю отпись в комментариях, это годнота. Мне было прям интересно посмотреть, как это работает и как это достичь. Плюс - хорошо подано. Реапектую и буду следить за каналом

[@ohmysite455]

Спасибо :) дальше будет больше

[@КсенияКашинова-с7щ]

Супер идея! Автор спасибо за реализацию) единственное в чем трудность возникла - нет параметра отсрочки старта анимации по скролу. Только скорость воспроизведения. Так что я от себя немного изменила код, теперь можно выставить отсрочку анимации в процентах от всей длины страницы $(document).ready(function () { const svg = document.getElementById("svgPath"); const length = svg.getTotalLength(); svg.style.strokeDasharray = length; svg.style.strokeDashoffset = length; // Задаем отсрочку в процентах от высоты страницы const startOffsetPercent = 10; // Например, 10% window.addEventListener("scroll", function () { const windowHeight = document.documentElement.clientHeight; const startOffset = (windowHeight * startOffsetPercent) / 100; const scrollY = window.scrollY || window.pageYOffset; const scrollPosition = Math.max(0, scrollY - startOffset); const scrollpercent = scrollPosition / (document.documentElement.scrollHeight - windowHeight); const draw = length * scrollpercent; svg.style.strokeDashoffset = length - draw; }); }); *строго код не судите, дополнять помогал chatGPT) возможны ошибки, если есть что добавить - велкоме))

[@igi.design]

Благодарю за такое доходчивое видео! Все с первого раза получилось!

[@маринаратникова-х6б]

Спасибо!!! давно искала доступным языком

[@ohmysite455]

Рад помочь!

[@Яна-ц1в8г]

спасибо большое! очень помогло)

[@ohmysite455]

На здоровье!

[@gargaloid]

Классный урок! Спасибо) Простой, но эффектный прием

[@ohmysite455]

Согласен, мне тоже очень нравится)

[@ЕленаЖукова-с2с]

Спасибо. Полезно👍

[@ohmysite455]

Рад помочь)

[@nadiashtrymoff8539]

Спасибо! Интересный эффект

[@ОлесяНо-б3о]

я прям новичок, модно сказать неделю увлеченно что делаю. и благодаря вашему уроку у меня получилась прорисовка линии, я была в таком восторге. ПРОСТО РЕСПЕК....

[@epimovdesign]

Все работает. Эффект супер! Прямо лег в мой проект. Спасибо!

[@АннаИвановна2000]

У вас просто топ контент 🎉сколько не искала на ютубе такой инфы нигде нет . Очень ждём новых видео

[@ЮлияКраус-я6е]

Спасибо!👍🏻👍🏻👍🏻

[@krislogvina]

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

[@velocatcher]

Спасибо! Попробую обязательно, интересный эффект

[@professor210]

очень крутая штука, спасибо!

[@evgenia8326]

спасибо

[@kerysheykina6317]

Оооочень полезно! Спасибо!

[@LidiaMatveev]

Спасибо!

[@tokkilap]

Огромное спасибо за видео! Очень полезное и крутое!

[@Michael_Faze]

2024 год, код по скроллу и по тригеру у меня не завелся. а так классный эффект

[@lyudmisha-design]

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

[@bocmanbarada]

Классный контент🔥

[@91elements7]

Пушка! Спасибо)

[@naddy4092]

Поставила первый и третий скрипт (по триггеру). Первый отлично работает, а с третьим скриптом картинка начала стираться, а не рисоваться. В чем проблема не могу понять.

[@autumnsunset8456]

спасибо!!

[@Verona_klim]

Всё делала по видео, а всё равно анимации линии нет на опубликованной версии, уже всю голову сломала почему((

[@andryv9355]

Спасибо, подписался! Можно ли такое сделать с пунктирной линией?

[@YaVa-web-designer]

видео -огонь! но у меня подпись работает в обратном порядке. сначала видна, потом стирается и больше не появляется. не знаю, как исправить

[@naddy4092]

Спасибо, подписалась

[@apollinariiaa]

Август 2024, работает у кого-нибудь? Месяца три назад делала, все было идеально, сейчас не работает ни один код

[@АружанСерик-ц2е]

Здравствуйте! У меня есть вопрос. Я по вашему инструкцию сделала анимацию цифр, отлично получилось спасибо🥳 теперь в другой блок хотела добавить эффект рисования. Все по коду вроде правильно, но не сработало и анимация цифры тоже не работает. Вопрос: если в одном коде что то не правильно, вся анимация по коду не сработает?

[@ТатьянаТа-ж7ш]

Ничего не понятно, но очень интересно! :) А откуда всё-таки взялись скрипты? Я еще только погружаюсь вл все это ..

[@АрсенийКараваев-ю1и]

Почему, когда я дохожу до нужного блока, линия уже больше чем на половину отрисована? Также при увеличении скорости с 2 и выше, траектория движения меняется и линия двигается снизу-вверх, а не наоборот. Кто-то сталкивался с данной проблемой и знает, как исправить?

[@Саша-е7т8й]

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

[@RuslanLike]

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

[@funnyseagull1444]

большое спасибо!!!!!!! Но может кто-нибудь помочь, как сделать чтобы линия при прокрутке вниз появлялась, как тропинка. А то у меня наоборот она исчезает. И куда вставлять значения, чтобы линия стала пунктирной 🙏 Если изменю строчку " svg.style.strokeDasharray = 10, 10;" То линия перестает рисовать и прокручивается на месте, не исчезая . КАк это можно исправить ? 🙏🙏🙏🙏

[@ЕвгенийПитилимов1609]

А можно сделать такую же анимацию, но справа налево?

[@ssa5800]

Людиии подскажите, почему у меня в фигме нету COPY AS SVG? Уже замучилась, пытаюсь повторить

[@ЕваИванова-ь5ь]

Срабатывает только одна анимация на страницу(

[@TatiYanaPavlova]

Привет! Подскажите, в чем может быть причина? Сделала по уроку, не рисует линию. Просто картинкой отображается сразу, шейп скрыт, как по видео. Прописала класс шейпу и в скрипте все заменила. Не работает. Вставил обычной картинкой. И намека нет на анимацию(

[@Дисциплина_в_удовольствие]

- Рисование по скролу. Не понятно как добиться этого эффекта когда элемент на 6-7 блоке. Пока до туда долистываешь там уже все нарисовалось. Как-то можно по тригеру это сделать?

[@TaniyLysenko]

поиграйте с формулой, я сделала для своего сайта вот так const draw = length * 2.5 * (scrollpercent*2); и стало рисоваться на моих глазах )))

[@autumnsunset8456]

@@TaniyLysenko помогло!! спасибо большое)

[@MRRascolbas]

Слушай, анимацию простого появления линий, можно делать также ? Или это можно сделать простой SBT анимацией ?

[@БаштаБашта-ъ7ъ]

очень большое спасибо! круто, но у меня почему-то скрипт по тригерру работает в обратную сторону - он линию стирает((( что может быть не так?

[@TaniyLysenko]

мне помогло вот так сделать в конце svg.style.strokeDashoffset = draw; вместо length - draw

[@VadimPasternak]

Спасибо

[@evgenykholod1967]

Спасибо