gsap
비디오용 전문 GSAP 애니메이션 만들기
비디오 합성용 GSAP 애니메이션을 작성하려면 정확한 타이밍과 결정적 실행이 필요합니다. 이 스킬은 포괄적인 GSAP 문서와 HyperFrames용 바로 사용 가능한 이펙트를 제공하여, 여러 리소스를 검색하지 않고도 부드럽고 전문적인 애니메이션을 만들 수 있습니다.
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"gsap" 사용 중입니다. 스태거 이펙트로 .card 요소 애니메이션화, 각 카드 간 0.1초 지연, 왼쪽에서 슬라이드 인
예상 결과:
gsap.from('.card', {
x: -50,
opacity: 0,
stagger: 0.1,
duration: 0.5,
ease: 'power2.out'
});
"gsap" 사용 중입니다. .logo가 먼저 페이드 인하고, .headline이 위로 슬라이드한 다음, headline 완료 후 .subtitle이 페이드 인하는 타임라인 구축
예상 결과:
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" 사용 중입니다. 초당 12자 속도로 'Welcome'을 입력하고, 커서 '|'이 솔리드와 깜빡임 상태를 번갈아 표시
예상 결과:
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)
품질 점수
만들 수 있는 것
비디오 오버레이에 진입 애니메이션 추가
비디오 합성에서 텍스트 오버레이와 UI 요소에 페이드 인, 슬라이드 또는 스케일 진입 애니메이션 만들기.
오디오 반응형 비주얼라이저 구축
비디오 배경에서 음악이나 음성에 반응하는 캔버스 기반 오디오 비주얼라이저 만들기.
복잡한 다단계 애니메이션 시퀀스 구성
GSAP 타임라인, 라벨 및 위치 매개변수를 사용하여 정확한 타이밍으로 여러 애니메이션 조정.
이 프롬프트를 사용해 보세요
GSAP를 사용하여 #hero 요소를 페이드 인하고 위쪽으로 100px 슬라이드합니다. 지속 시간 0.6초, power2.out 이징 사용.
GSAP 타임라인을 만드세요: 1) .title 페이드 인, 2) 0.2초 후 .subtitle 페이드 인, 3) 0.5초에서 .button 스케일 인. 지연 대신 위치 매개변수 사용.
초당 10자 속도로 #message에 타자기 애니메이션을 만들고, 커서가 있을 때 깜빡임. 유휴 상태에서 커서가 깜빡여야 함.
AUDIO_DATA.frames[0].bands 배열을 사용하여 막대로 오디오 프레임 [FRAME]을 렌더링합니다. 각 대역이 캔버스 직사각형에 매핑됩니다. 베이스가 스케일을, 트레블이 불투명도를 구동합니다.
모범 사례
- GPU 가속을 위해 레이아웃 속성 대신 transform 속성(x, y, scale, rotation) 사용
- 가독성을 위해 지연 연결 대신 타임라인 생성자에 기본값 전달
- 프로그래밍 방식으로 재생 제어가 필요할 때 트윈 및 타임라인 반환 값 저장
피하기
- transform으로 동일한 효과를 얻을 수 있으면 width, height, top, left 애니메이션화하지 않기
- 타임라인 및 위치 매개변수가 더 잘 시퀀스화할 때 지연으로 트윈 연결하지 않기
- 아직 DOM에 존재하지 않는 요소를 대상으로 트윈 생성하지 않기