Всеволод Кочнев — Как GSAP украл спектакль?

• Сеня Пугач представляет Всеволода Кочнева.  

• Всеволод рассказывает о выборе библиотеки GSAP для создания анимированных веб-сайтов.  

• GSAP фокусируется на производительности и совместимости между браузерами.  

• GSAP предоставляет унифицированные API и множество плагинов.  

• Всеволод объясняет, что GSAP помогает решать проблемы с производительностью и совместимостью.  

• GSAP позволяет создавать анимации любого уровня сложности с помощью JavaScript.  

• GSAP обеспечивает совместимость и производительность на всех устройствах.  

• GSAP независим от стилей CSS и предоставляет расширяемые плагины.  

• GSAP держит все инструменты в едином стиле, что удобно для разработки.  

• GSAP входит в топ-5 библиотек CDN, что увеличивает вероятность его наличия у пользователей.  

• GSAP реализует множество функций через плагины.  

• GSAP делится на плагины, иззинги и кор-модуль.  

• GSAP включает плагины, иззинги и кор-модуль.  

• Кор-модуль включает объекты для совместимости с предыдущими версиями.  

• GSAP создает новый твин при вызове с аргументами.  

• Твин инициализируется и устанавливает начальные значения и параметры анимации.  

• Рендер обновляет состояние анимации и добавляет её в браузер.  

• Кэш используется для оптимизации производительности при работе с CSS.  

• Кэш принимает элемент и плагин для работы с CSS или Pixi.  

• Твин в GSAP может быть ленивым для оптимизации производительности.  

• Примеры использования ленивого рендеринга включают задержку анимации и передачу параметров через функции.  

• Функция вызывается на каждый кадр анимации для обновления состояния.  

• Включает вычисление времени, корректировку времени начала и автоматическое планирование следующего вызова.  

• При задержке анимации возникает вопрос о синхронизации.  

• Некоторые библиотеки сдвигают начало анимации, что приводит к прыжкам.  

• JSSap решает эту проблему, корректируя основной таймер при задержке.  

• Округление чисел в JSSap улучшает рендеринг и оптимизирует арифметические операции.  

• Вставка сокращенных чисел в трансформ позволяет браузеру обрабатывать меньше данных.  

• Разные браузеры по-разному сокращают числа, что учитывается JSSap.  

• JSSap переводит числовые значения для облегчения арифметических операций.  

• Сравнение числовых и строковых значений показывает, что числовые значения обрабатываются быстрее.  

• JSSap активирует аппаратное ускорение и оптимизирует декомпозицию слоев.  

• В последнем кадре анимации используется 2D-трансформация для освобождения памяти.  

• Параметр force3D позволяет использовать 3D-трансформации для любой анимации.  

• JSSap использует побитовые операции для сокращения чисел.  

• Очистка памяти и оптимизация рендеринга применяются повсеместно.  

• Группирование процессов анимации и условия для рендеринга используются для оптимизации.  

• JSSap создает временные элементы для проверки поддерживаемых свойств и конвертации значений.  

• Проблемы совместимости в браузерах решаются с помощью временных элементов.  

• JSSap очищает передаваемые значения от прокси для совместимости с фреймворками.  

• Метод getBoxHack обходит проблемы с методом getBox в старых версиях Firefox.  

• JSSap создает новый SVG-элемент, считывает рамку и удаляет его.  

• JSSap имеет свой бенчмарк, но он ограничен анимацией только div.  

• Автор создал свой бенчмарк для проверки кадров в секунду, объема памяти и времени выполнения задачи.  

• В бенчмарке SVG победил JSSap, а в бенчмарке Canvas — Popper.  

• Проект фэнтези-турнира по Dota 2.  

• Создание лендинга для привлечения участников.  

• Проблемы с длинным лендингом и кнопкой "колту экшн".  

• Переход к концепции слайдера.  

• Использование библиотеки плагинов для анимации.  

• Создание нового лендинга за один день.  

• Регистрация спортсменов и управление жестами.  

• Проблемы с кастомизацией и использованием свайпера.  

• Применение JSS для реализации слайдера.  

• Блок-схема работы слайдера.  

• Определение направления свайпа и построение таймлайна.  

• Плавная анимация и кастомизация.  

• Добавление фонов для базовых тестов.  

• Проблемы совместимости и использование JSS.  

• Преимущества JSS для сложных анимаций.  

• JSS как эффективная технология.  

• Вакансии и проекты, использующие JSS.  

• Вопросы и ответы о JSS и его применении.  

• Объяснение картинки про увольнение.  

• Взаимоотношения JSS и WebGL.  

• Использование JSS для анимации 3D-объектов.  

• Проблемы с производительностью на мобильных устройствах.  

• Решение проблем с JSS.  

• Влияние трансформаций на производительность браузера.