Создание пользовательского курсора с красивой анимацией. CSS / JavaScript / GSAP. Видеоурок и материалы

Всем привет, друзья! Сегодня создадим пользовательский курсор с красивой анимацией движения и наведения. В уроке будем использовать CSS (Sass), JavaScript и платформу для создания потрясающих анимаций GSAP. Также научимся создавать сложную анимацию элементов cubic-bezier.

Важные дополнения!

Теперь стартер работает с JavaScript модульно, посредством webpack и babel. Вот какие изменения следует учитывать в процессе обучения:

1. Следует явно определять все основные переменные проекта через let и импортировать GSAP в проект как модуль в "app.js", а не файлом в Gulpfile. В проекте-примере данного урока, в самом начале файла "app.js" добавьте:

   import { gsap } from 'gsap'
   let cx, cy, mouseX, mouseY, posX, posY, clientX, clientY, dx, dy, tiltx, tilty, request, radius, degree
   

2. Папка "images" была переименована в "img".
3. Стартер был значительно переработан и упрощён. Было удалено дерево переменных, теперь все настройки следует выполнять непосредственно в функциях задач. Удалены лишние переменные настроек, усложняющие восприятие и работу со стартером.
4. В остальном, используйте стартер как это было показано в уроках.

Результат

1. Готовый результат (демо): Смотреть
2. Исходники, дизайн, демо: Скачать

Сопутствующие уроки

1. Предыдущий урок по созданию 3D Tilt анимации: Изучить
2. Gulp 4 - Руководство для самых маленьких
3. OptimizedHTML 5 - Стартер для вёрстки сайтов (урок)
4. Настройка окружения WSL
5. Редактор кода, используемый в уроке
6. Молниеносная вёрстка с EMMET
7. Основы HTML вёрстки

Дополнительные ресурсы

1. cubic-bezier (с настройками): https://cubic-bezier.com/#.75,-1.27,.3,2.33
2. GSAP .to() Documentation: gsap.to()
3. GSAP .set() Documentation: gsap.set()