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

Поделиться
HTML-код
  • Опубликовано: 22 окт 2024

Комментарии • 27

  • @gergeorg
    @gergeorg 3 года назад +9

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

  • @ДарьяАрсеньева-х9и
    @ДарьяАрсеньева-х9и 2 года назад +1

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

    • @maxgraph
      @maxgraph  2 года назад

      Пожалуйста)

  • @IhorVasilchenko
    @IhorVasilchenko 3 года назад +1

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

    • @maxgraph
      @maxgraph  3 года назад +1

      Пожалуйста)

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

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

  • @ДаниалСатылган
    @ДаниалСатылган 3 года назад +8

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

    • @maxgraph
      @maxgraph  3 года назад +3

      Может быть)

  • @lyudmilagvozdeva2605
    @lyudmilagvozdeva2605 Год назад

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

  • @andrewsmal5173
    @andrewsmal5173 3 года назад +1

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

  • @ivankrashevskyi3837
    @ivankrashevskyi3837 2 года назад +1

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

    • @maxgraph
      @maxgraph  2 года назад

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

  • @leniyuva3290
    @leniyuva3290 3 года назад

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

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

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

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

  • @stelsboii
    @stelsboii 3 года назад +2

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

  • @Pipal96
    @Pipal96 Год назад

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

  • @makona79li2
    @makona79li2 3 года назад

    Спасибо!

    • @maxgraph
      @maxgraph  3 года назад

      Пожалуйста)

  • @maxwith7244
    @maxwith7244 2 года назад

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

    • @maxgraph
      @maxgraph  2 года назад

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

  • @sidjo6191
    @sidjo6191 2 года назад

    жесть

    • @maxgraph
      @maxgraph  2 года назад

      ?

    • @sidjo6191
      @sidjo6191 2 года назад

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

  • @detro1821
    @detro1821 3 года назад

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

    • @виртуоз_ру
      @виртуоз_ру 3 года назад

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