GreenSock #4. Анимация букв на GSAP

[@lyudmilagvozdeva2605]

Спасибо. Внедрила)

[@КонстантинЯкимцев]

огромное спасибо, а за исходники большой лайк

[@gergeorg]

огонь, спасибо! хотелось бы больше гринсока видеть

[@maxgraph]

Будет)

[@IhorVasilchenko]

Спасибо это крутая библиотека с большим количеством возможностей

[@maxgraph]

Пожалуйста)

[@ДарьяАрсеньева-х9и]

Шикарный эффект, который при этом достаточно просто реализуется😃 Спасибо тебе большое за такие полезные и содержательные видео 👍👏

[@maxgraph]

Пожалуйста)

[@Pipal96]

Красиво конечно, но надеюсь никто не будет так писать. Это же черная дыра для перфоманса. Столько DOM элементов создается на эту штуку, что капец. Браузер постоянно прокручивать будет стадии рендера

[@leniyuva3290]

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

[@maxgraph]

Пожалуйста)

[@ДаниалСатылган]

GSAP это конечно круто, но можешь сделать хотя бы один ролик по svg анимаций

[@maxgraph]

Может быть)

[@ОльгаБатаева-ц1ц]

Зануда mode "on": - после первого return функция прерывается, второй return не возвращается и смысла в нем нет; - хорошо бы писать код в едином стиле: если присваиваете функцию в const, то так и делайте дальше; глобальную области видимости в действующих проектах тоже засорять не рекомендуется - кто-то в продакшн это понесет...

[@sidjo6191]

жесть

[@maxgraph]

?

[@sidjo6191]

@@maxgraph Просто интересно, какой фпс выдает браузер, когда исполняет эту анимацию и как это будет на недорогом смартфоне, если мы представим, что эта анимация будет интегрирована в полноценный сайт с кучей другого js?)) Я не пробовал сделать эту анимацию, могу только порассуждать) Например возьмем текст из 40 слов в среднем слово - пять букв, это 200 div-ов. InnerHTML это ок, но функция splitText вызывает еще три функции внутри себя и она сама вызывается 200 раз(в вашем случае 317 раз) столько же раз вызывается функция random, да и querySelector(поиск по dom) тоже 317 раз, также как и Timeline вызывается и вешает свои обработчики на каждый элемент, но что самое интересное, это то , что gsap это js библиотека и пусть даже они используют безопасные свойства css(свойства которые не двигают макет), это все равно пересчет на js который блокирует основной поток... По идее, это значит, что никакого интерактива пока анимация не закончится, а если она будет тормозить на дешевых смартфонах, никто конца анимации ждать не будет, что бы нажать кнопку('купить' или 'отправить' например).Да, requestAnimation, но много нюансов). И вот интересно просто)) Если ребята из gsap поработали хорошо и все круто, то это просто -вау и уважуха.

[@andrewsmal5173]

Боже просто восхищаюсь тобой! Было бы классно увидеть курс по ооп или реакт

[@makona79li2]

Спасибо!

[@maxgraph]

Пожалуйста)

[@stelsboii]

Побольше гринсока

[@ivankrashevskyi3837]

Спасибо твои видео помогают в проектах. Было бы хорошо если бы по gsap ты выпустил не просто видос как вот сделать какую то анимацию, а курс обучающий какой то базовый, таких практически нет, а то что есть либо устаревшее либо скудное совсем. Я думаю возможно это было бы популярно.

[@maxgraph]

Базовые уроки есть в общем-то, самые самые азы) ну а дальше уже практика

[@maxwith7244]

Крутые видосы!!! У тебя не было случайно такой проблемы что если изменяешь высоту элемента который находится над анимируемым блоком то анимация происходит раньше и подпрыгивает вверх? (Уже 3 день сижу с этой проблемой)

[@maxgraph]

Спасибо) нет, не сталкивался

[@detro1821]

а tweenmax разве не устарелый синтаксис? чем он отличается от gsap.to?

[@виртуоз_ру]

Устарел, но работает. Лучше использовать gsap.from()