gsap
Создавайте профессиональные GSAP-анимации для видео
Написание GSAP-анимаций для видеокомпозиций требует точной синхронизации и детерминированного выполнения. Этот навык предоставляет полную документацию по GSAP и готовые эффекты для HyperFrames, позволяя создавать плавные профессиональные анимации без поиска информации в нескольких источниках.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «gsap». Анимируйте элементы .card с эффектом стагерации, задержкой 0.1с между каждым элементом, смещением слева
Ожидаемый результат:
gsap.from('.card', {
x: -50,
opacity: 0,
stagger: 0.1,
duration: 0.5,
ease: 'power2.out'
});
Использование «gsap». Создайте временную шкалу, где .logo появляется первым, затем .headline смещается вверх, затем .subtitle появляется после завершения headline
Ожидаемый результат:
const tl = gsap.timeline();
tl.to('.logo', { opacity: 1, duration: 0.4 })
.to('.headline', { y: 0, opacity: 1, duration: 0.5 }, '<')
.to('.subtitle', { opacity: 1, duration: 0.4 }, '+=0.2');
Использование «gsap». Напечатайте 'Welcome' со скоростью 12 символов в секунду с курсором '|', который мигает между сплошным и мигающим состоянием
Ожидаемый результат:
const text = 'Welcome';
const cps = 12;
tl.call(() => cursor.classList.replace('cursor-blink', 'cursor-solid'), [], t);
tl.to('#typed', { text: { value: text }, duration: text.length / cps, ease: 'none' }, t);
tl.call(() => cursor.classList.replace('cursor-solid', 'cursor-blink'), [], t + text.length / cps);
Аудит безопасности
Низкий рискStatic analysis flagged 171 potential issues, but evaluation determined all critical and high findings are false positives. The scanner misidentified HTML script tags as shell commands, FFT signal processing as weak cryptography, and generic variable names as credential access patterns. The Python audio extraction script uses subprocess to run ffmpeg for legitimate audio processing. No malicious behavior or user input injection vectors detected.
Проблемы высокого риска (2)
Проблемы среднего риска (1)
Проблемы низкого риска (2)
Факторы риска
⚡ Содержит скрипты (1)
📁 Доступ к файловой системе (1)
⚙️ Внешние команды (1)
Оценка качества
Что вы можете построить
Добавление анимаций входа для видео наложений
Создавайте анимации появления с эффектом затухания, смещения или масштабирования для текстовых наложений и элементов интерфейса в видеокомпозициях.
Создание аудиореактивных визуализаторов
Создавайте визуализаторы на основе canvas, реагирующие на музыку или речь в видеофонах.
Последовательность сложных многоэтапных анимаций
Координируйте несколько анимаций с точной синхронизацией с помощью временных шкал GSAP, меток и позиционных параметров.
Попробуйте эти промпты
Use GSAP to animate #hero element fading in and sliding up 100px. Duration 0.6s with power2.out easing.
Create a GSAP timeline that: 1) fades in .title, 2) fades in .subtitle 0.2s after, 3) scales in .button at 0.5s. Use position parameters, not delay.
Create a typewriter animation for #message that types at 10 characters per second with a blinking cursor. Cursor should blink when idle.
Render audio frame [FRAME] with bars using AUDIO_DATA.frames[0].bands array. Each band maps to a canvas rectangle. Bass drives scale, treble drives opacity.
Лучшие практики
- Используйте transform-свойства (x, y, scale, rotation) вместо свойств раскладки для аппаратного ускорения GPU
- Передавайте значения по умолчанию в конструктор временной шкалы вместо использования задержек для лучшей читаемости
- Сохраняйте возвращаемые значения tween и timeline, когда нужно программно управлять воспроизведением
Избегать
- Не анимируйте width, height, top или left, когда transform позволяет достичь того же эффекта
- Не связывайте несколько tween через delay, когда временная шкала с позиционными параметрами лучше упорядочивает последовательность
- Не создавайте tween для элементов, которых еще нет в DOM