Title

DD25: Подключайте Gsap в свои проекты правильно.

Интро

Недавно Webflow выкатил обновление, в котором теперь библиотеку Gsap можно подключать прямо внутри Webflow, но на практике он просто вставляет CDN скрипты, и делает он это не так как я ожидаю. Они не ставят в них атрибут defer

Проблема на выходе

Если не хотите терять около 8 поинтов или 0.6 секунд блокирующего времени:

Решение

1. Вставляется скрипты сами, прописывая атрибут defer. 2. Весь свой код оборачивайте в DOMContentLoaded и тоже ставим атрибут defer. Таким образом скрипты будут грузиться фоном, не блокируя рендер страницы, и исполнятся всегда до DOMContentLoaded (ваш код всегда найдет элементы для анимации, потому что библиотека и DOM уже будут загружены в момент запуска)

Пример

.html

Важно

Данный пример касается только кейса с анимациями. Если ваш код слушает что-то асинхронно (например запросы с базы данных и тд), defer не подойдет. PS: ну и это не всегда панацея. Если вы используете Gsap внутри редактора Webflow, то возможно придется включать библиотеку внутри. Я же все пишу сам, поэтому у меня такой способ помогает еще больше увеличить оптимизацию и управлять своим проектом.