Elementor에서 GSAP 애니메이션을 추가하는 방법(무료 템플릿)

Elementor 내부에서 전체 GSAP 애니메이션을 실행할 수 있습니다. 분할 텍스트는 플러그인 개발이나 function.php 편집 없이 수평 스크롤 고정,스크롤 스크러빙 시차,카운터 등을 모두 드러내며 클라이언트는 모든 헤드라인과 색상을 편집할 수 있는 기능을 유지합니다. 비결은 위젯 빌더 마스터 애드온에서: HTML, CSS 및 JS를 한 번 붙여넣고 편집 가능한 항목을 표시하면 누구나 페이지에 삭제하고 패널에서 편집할 수 있는 일반 Elementor 위젯이 됩니다.

그것을 증명하기 위해,저는 완전한 한 페이지짜리 GSAP 랜딩 템플릿 (플레이헤드라는 가상의 모션 스튜디오) 을 만들었고,모든 섹션을 가져오기 가능한 위젯으로 변환할 수 있습니다 6 개의 위젯을 모두 하나의 zip으로 다운로드합니다 이 게시물 끝에서 몇 번의 클릭으로 가져오고, 그것들을 따로 선택하여 정확히 어떻게 작동하는지 확인하세요.

이 가이드에서는 영웅 섹션 위젯을 어떻게 구축했는지 단계별로 살펴본 다음 나머지 5 개 섹션을 요약합니다. ChatGPT 또는 Claude 로 생성한 코드를 포함하여 HTML/CSS/JS 디자인을 Elementor 로 변환하고 싶었던 적이 있다면 이것이 워크플로입니다.

시작하기 전에 하나의 바로 가기: 원하는 모션이 움직이는 이미지 행 인 경우 GSAP 를 전혀 작성할 필요가 없을 수도 있습니다. 우리는 이미 배송했습니다 20 개의 캐러셀 및 슬라이더 위젯 이와 같은 방식으로 구축 – 하나는 3D로 측면 패널을 회전, 하나는 스택에서 카드를 벗겨, 하나는 곡선 림 주위에 그것의 슬라이드를 타고 – 그리고 각각은 당신이 패널에서 편집 일반 Elementor 위젯으로 가져옵니다.

그 중 8개는 무료 플러그인에서 실행되고 12개는 Pro가 필요합니다. 정확히 일치하는 것이 없더라도 가장 가까운 것을 가져오고 그 안에 있는 JS를 읽는 것이 빈 편집기에서 시작하여 이기고 이 게시물 아래의 빌드 단계가 JS를 컨트롤로 바꾸는 것입니다.

GSAP 애니메이션이란 무엇입니까?

GSAP (GreenSock 애니메이션 플랫폼) 는 웹 페이지의 모든 애니메이션 — 텍스트, 이미지, SVG, CSS 속성 — 프레임 정확한 타이밍과 쉬운 제어와 자바 스크립트 애니메이션 라이브러리입니다. 그것은 스크롤 효과와 텍스트는 수상 경력에 빛나는 사이트에 볼 수 공개를 전원을 공급하고, 버전 3.13 이후 ScrollTrigger 및 SplitText와 같은 프리미엄 플러그인을 포함한 전체 라이브러리는 100% 무료입니다.

그 마지막 부분은 사람들이 깨닫는 것보다 더 중요합니다. SplitText (헤드 라인을 개별적으로 애니메이션 된 캐릭터로 나누는 플러그인) 는 “Club GreenSock”페이월 뒤에 연간 $99 +의 비용이 들었습니다. Webflow 가 GSAP 를 인수 한 후 모든 것이 무료로 진행되었습니다. 따라서 WordPress 사용자에게 남은 유일한 실제 장벽은 통합이며,이 게시물이 제거하는 것입니다.

문제: Elementor가 GSAP를 말하지 않습니다

Elementor 의 내장 모션 효과는 입구 애니메이션,기본 시차 및 마우스 추적을 다룹니다. 페이지의 80%에 적합합니다. 그러나 그들은 할 수 없습니다:

• 분할 텍스트는 각 캐릭터가 자체 지연으로 애니메이션되는 위치를 표시합니다
• 페이지가 수직으로 스크롤되는 동안 수평으로 스크롤되는 고정 섹션입니다
• 스크롤 스크럽된 애니메이션을 정확한 스크롤 위치에 묶음 (ScrollTrigger 의 전문 분야)
• 하나의 애니메이션이 다음 애니메이션으로 전달되는 연결된 타임라인입니다
• 요소가 방문자의 스크롤 속도에 반응하는 속도 반응 효과입니다

일반적인 해결 방법은 모두 하나의 결함을 공유합니다. HTML 위젯에 코드를 붙여 넣을 수 있지만 헤드 라인 텍스트는 클라이언트가 감히 만질 수없는 코드 블록 안에 있습니다. GSAP 전용 애니메이션 플러그인을 설치할 수 있지만 사전 설정 효과에 국한되어 있습니다. 자식 테마에서 스크립트를 손으로 대기열에 넣을 수 있지만 이제 헤드 라인을 편집하려면 개발자가 필요합니다.

Elementor에 GSAP 애니메이션을 추가하는 4가지 방법(비교)

페이드 온 스크롤만 있으면 사전 설정 플러그인은 정말 괜찮습니다. 다른 사람이 가지고 있지 않은 애니메이션을 원할 때 위젯 빌더가 승리합니다. 왜냐하면 귀하(또는 AI)가 이를 작성했기 때문입니다. 코드 작업을 한 번 수행하고 편집 가능한 부분을 컨트롤에 연결한 다음부터는 모든 기본 Elementor 위젯처럼 작동합니다: 텍스트 필드, 색상 선택기, 링크 컨트롤, 로트.

무료 템플릿: 6개의 위젯으로 구성된 전체 GSAP 랜딩 페이지

플레이헤드는 허구의 모션 스튜디오를 위한 한 페이지짜리 사이트입니다. 저는 일부러 그 틈새시장을 골랐습니다: 모션 스튜디오를 위한,애니메이션 이다 포트폴리오, 그래서 모든 효과는 그 자리를 적립합니다. 페이지는 공식 CDN에서로드 ScrollTrigger 및 SplitText와 GSAP 3.15에서 실행됩니다.

다운로드에 포함된 6개의 위젯:

1. 영웅 — SplitText 문자 공개, 시차 다이아몬드 모양, 표류하는 광선 구체, 자기 버튼
2. 큰천막 — 방문자가 더 빠르게 스크롤할 때 속도가 빨라지는 무한 티커입니다
3. 작업 갤러리 — 라이브 카드 카운터와 속도 기반 카드 스큐가 있는 고정된 수평 스크롤
4. 통계 — 뷰포트에 들어갈 때 0에서 롤업되는 카운터입니다
5. 프로세스 — 문자 그대로 자신을 그리는 4개의 완화 곡선. 각각은 고유한 GSAP 용이성을 사용합니다
6. CTA — 자기 이메일 버튼을 사용하여 스크롤 트리거 분할 텍스트 공개

모든 위젯은 자체 포함: 그것은 당신의 테마와 충돌 할 수 없습니다 범위 CSS, 모든 여섯 위젯이 같은 페이지에 앉아 경우에도 라이브러리를 한 번 가져 오는 자체 GSAP 로더, 그리고 CDN 이제까지 실패하는 경우 콘텐츠가 표시 유지 폴백 감소 - 모션 환경 설정도 존중됩니다. 그들의 OS 에서 애니메이션을 해제 방문자는 정적 페이지를 얻을.

영웅 위젯을 단계별로 구축한 방법

로 일반화하는 부분입니다 어떤 원하게 될 애니메이션 매번 똑같은 일곱 걸음.

1단계: HTML, CSS, JS 작업부터 시작하세요

소스는 무엇이든 될 수 있습니다: 당신이 존경하는 CodePen,당신이 코딩 한 섹션,또는 AI 채팅에서 출력. 내 영웅은 세 파일이었다 — 마크 업,스타일, GSAP 타임 라인을 구축하는 스크립트. 위젯 빌더를 터치하기 전에 브라우저에서 일반.html 파일로 작동하는지 확인하십시오. 디버깅은 어떤 페이지 빌더 내부보다 거기에서 10 배 더 쉽습니다.

2단계: 모든 범위를 하나의 래퍼 클래스로 범위 지정합니다

당신의 위젯은 다른 위젯, 다른 플러그인, 다른 CSS와 페이지에 살고 있습니다. 하나의 고유 클래스에 전체 섹션을 감싸고 모든 선택기를 걸어:

<section class="ph-hero-wrap">
  ...
</section>

/* every rule starts with the wrapper */
.ph-hero-wrap .ph-title { font-size: clamp(3rem, 10.5vw, 8.6rem); }
.ph-hero-wrap .ph-btn-solid { background: var(--ph-primary, #5551f0); }

또한 일반 애니메이션 키프레임의 이름을 바꿉니다. @keyframes spin 된다 @keyframes ph-hero-spin, 그래서 한 페이지에 두 위젯은 같은 이름을 통해 싸움을 결코. 이 단일 단계는 방지 90% 의 “내 위젯은 페이지를 파산” 지원 티켓.

3 단계: 편집 가능한 텍스트를 토큰으로 대체

사이트 소유자가 다른 단어를 원할 수 있는 경우 하드코딩된 텍스트를 이중 중괄호 안의 토큰으로 바꾸십시오:

<h1 class="ph-title">
  <span class="ph-split">{{title_line_one}}</span>
  <span class="ph-split">{{title_line_two}}</span>
  <em class="ph-serif">{{accent_word}}</em>
</h1>

공지사항 헤드라인을 하나가 아닌 세 개의 토큰으로 나눴습니다. 악센트 단어 (“move”) 는 스타일이 다릅니다 — italic serif,amber, animated — 그래서 스스로 제어권을 얻습니다. 편집하는 사람은 결코 그것을 알 필요가 없습니다; 그들은 단지 레이블이 붙은 세 개의 텍스트 필드를 봅니다. 각 토큰은 a 가 됩니다 텍스트 제어 건축업자에.

버튼은 URL 컨트롤을 얻으므로 링크, 새 탭 토글 및 nofollow는 패널의 모든 작업을 수행합니다:

<a class="ph-btn" href="{{first_button_url.url}}"
   target="{{first_button_url.is_external}}"
   rel="{{first_button_url.nofollow}}">{{first_button_text}}</a>

4단계: 브랜드 색상을 스타일 컨트롤로 전환합니다

서른 가지 색상 컨트롤을 만들고 싶은 충동을 억제하세요. 내 영웅은 다섯 가지: 배경,텍스트, 악센트,기본, 음소거를 가지고 있습니다. 이들은 래퍼에 CSS 변수를 공급하고,모든 파생 색상 (광선,테두리, 그림자) 은 그것으로 계산됩니다 color-mix():

.ph-hero-wrap {
  --ph-accent: {{accent_color}};
  --ph-primary: {{primary_color}};
  --ph-glow-primary: color-mix(in srgb, var(--ph-primary, #5551f0) 22%, transparent);
}

에서 “Primary”를 변경합니다 색상 제어 그리고 버튼, 야광구, 다이아몬드 모양이 모두 함께 업데이트됩니다. 위젯이 조립되는 대신 디자인된 느낌을 주는 것이 바로 그것입니다.

5단계: CDN에서 GSAP를 로드합니다. — 한 번

JS는 보호된 ID가 있는 GSAP 스크립트를 삽입하므로 한 페이지에 있는 6개의 위젯은 여전히 라이브러리를 정확히 한 번 로드합니다:

["ph-gsap-core", "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"],
["ph-gsap-st",   "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"],
["ph-gsap-split","https://cdn.jsdelivr.net/npm/gsap@3.15/dist/SplitText.min.js"]

그러면 애니메이션 자체가 표준 GSAP 타임라인입니다. 캐릭터는 비틀거리며 등장하고 악센트 단어는 함께 나타납니다 back.out(2.5), 다이아몬드는 스크롤 위치에 대해 문질러 닦습니다. GSAP 를 이미 알고 있다면 아무것도 변하지 않습니다. 그렇지 않다면 이것은 AI 가 행복하게 작성할 코드입니다 (자세한 내용은 아래 참조).

6 단계: 위젯 빌더에서 위젯을 만듭니다

WordPress 대시보드에서: 마스터 애드온 → 위젯 빌더 → 새로 추가. 위젯의 이름을 지정하고 아이콘을 선택한 다음 세 개의 파일을 HTML,CSS 및 JS 탭에 붙여 넣습니다.

이제 토큰당 하나의 컨트롤을 추가하세요: 내 영웅을 위한 19 — 4 개의 눈썹 텍스트, 4 개의 표제 필드, 설명, 링크가 있는 2 개의 버튼, 스크롤 큐, 스타일 탭의 5 가지 색상 컨트롤 이름은 토큰과 정확히 일치해야 합니다: the {{title_line_one}} 토큰에는 이름이 지정된 컨트롤이 필요합니다 title_line_one. 전체 제어 참조는 다음에 있습니다 위젯 빌더 문서.

복사할 가치가 있는 세부 사항 하나: 모든 색상 컨트롤에 디자인과 일치하는 기본값을 지정합니다. 색상 컨트롤이 비어 있어 회색을 가져오는 위젯은 그렇지 않은 경우에도 깨진 것처럼 보입니다.

7단계: Elementor에 넣고 위젯처럼 편집하세요

위젯을 게시하면 마스터 애드온 아래의 Elementor 패널에 나타납니다. 페이지로 드래그하면 왼쪽 패널에 레이블이 지정된 필드가 표시됩니다. “We make”를 자신의 헤드라인으로 변경하고,악센트를 다시 색칠하고,가격 페이지에서 버튼을 가리킵니다. GSAP 타임라인은 모든 편집을 통해 계속 실행됩니다. 이것이 바로 전체 약속입니다: 애니메이션 복잡성이 숨겨지고 콘텐츠 편집이 노출됩니다.

다른 다섯 섹션, 간략하게

천막 (3 개의 통제). 티커 텍스트는 간격이 없는 CSS 루프에 대해 두 번 인쇄되며 GSAP 가 스크롤 속도에 반응하도록 인계받습니다. 빠르게 스크롤하면 최대 4 배까지 가속된 다음 다시 완화됩니다. 대체가 순수 CSS 이기 때문에 재미있는 교육 예: GSAP 가 로드되지 않으면 여전히 스크롤됩니다.

작업 갤러리 (22 컨트롤). 쇼피스. ScrollTrigger 는 카드 트랙이 수평으로 번역되는 동안 섹션을 고정하고 카운터는 01 / 05 를 선택하고 카드는 스크롤 속도에 따라 약간 기울어집니다. 각각 편집 가능한 제목,타임 코드 및 태그가있는 5 개의 카드는 모바일에서 기본 스 와이프 캐러셀로 저하되며 고정이 필요없고 JS 가 필요하지 않습니다. 핀 수학이 작동하려면 Elementor 의 전폭 섹션이 필요합니다.

통계(13개 컨트롤). 보기 안으로 스크롤할 때 엑스포의 용이성으로 카운트업되는 네 개의 숫자. 최종 숫자는 마크업 자체에 있으므로 JavaScript 가 비활성화된 방문자라도 “0”이 아닌 “142”를 볼 수 있습니다.

프로세스(20개 컨트롤). 페이지에서 제가 가장 좋아하는 자만심: 네 가지 프로세스 단계,각각은 정확한 용이성을 사용하여 스스로 그리는 SVG 완화 곡선과 쌍을 이룹니다. 선형 곡선은 선형으로 그려지며 백아웃 곡선은 오버슈트됩니다. 코드 캡션은 편집 가능한 텍스트 컨트롤이므로 GSAP 참조를 자신의 단계 설명으로 바꿀 수 있습니다.

CTA(11개 컨트롤). 영웅과 동일한 분할 텍스트 기술이지만 스크롤에서 트리거되며 커서를 따라 탄력적으로 쉽게 튀어 나오는 자기 버튼이 있습니다. URL 컨트롤을 mailto: link로 지정하면 연락처 섹션입니다.

템플릿(위젯 6개, 우편번호 1개)을 다운로드하세요

gsap-animation-elementor-widgets.zip을 다운로드하세요 — 6개의 위젯 JSON 파일 모두 무료이며 이메일 게이트가 없습니다.

시작하기 전에 한 가지 참고 사항: Master Addons의 무료 버전은 제한된 Widget Builder를 제공하며 이러한 위젯 사용에 대한 전체 기능 세트가 함께 제공됩니다 마스터 애드온 프로. 가져오려면:

1. 다운로드 압축을 풉니 다 — 당신은 여섯 JSON 파일을 볼 수 있습니다, 섹션 당 하나
2. 로 이동 마스터 애드온 → 위젯 빌더 워드프레스 대시보드에서
3. 클릭 가져오기을 선택하고, JSON 파일을 선택하고, 확인합니다
4. 원하는 섹션에 대해 반복합니다 (6 개 모두 필요하지 않음)
5. Elementor로 페이지를 열고 마스터 애드온 카테고리에서 위젯을 끌어옵니다

모든 것은 수입 후 편집 할 수 있습니다: 6 개의 위젯,모든 색상,모든 헤드 라인,모든 링크에 걸쳐 88 컨트롤. 업로드 할 이미지가 없습니다. 모든 비주얼은 CSS 및 SVG 이며 전체 템플릿도 200KB 미만으로 유지합니다.

AI 각도: 생성된 모든 설계를 Elementor로 변환합니다

AI 도구는 지금 진정으로 좋은 GSAP 코드를 작성합니다. ChatGPT 또는 Claude 에게 “GSAP 분할 텍스트 공개,어두운 배경,스크롤 시차가있는 영웅 섹션”을 요청하면 한 응답으로 HTML,CSS 및 JS 를 작동하게됩니다. 문제는 항상 마지막 마일이었습니다: 그 코드는 정적 파일로 고정되어 Elementor 에서 편집하는 클라이언트에게는 쓸모가 없었습니다.

위젯 빌더는 그 마지막 마일입니다. 잘 작동하는 프롬프트 패턴:

Build a [section type] with GSAP animation.
Requirements:
- Wrap everything in one unique class, prefix all selectors with it
- Load gsap from cdn.jsdelivr.net/npm/gsap@3.15 via injected script tags
- Put editable text in {{token}} placeholders
- Define brand colors as CSS variables on the wrapper

앞에 그 네 가지 제약 조건을 물어보고 출력은 거의 변하지 않은 위젯 빌더로 떨어집니다. 나는 여전히 그것을 플랫 HTML 파일로 먼저 테스트 할 것입니다. AI 코드는 일반적으로 작동하지만 “보통”은 클라이언트의 라이브 페이지 내부에서 발견하고 싶은 단어가 아닙니다.

성능: GSAP 애니메이션을 빠르게 유지하세요

• 라이브러리를 한 번 불러옵니다. 5단계의 보호된 스크립트 ID는 여러 위젯에서 이를 자동으로 처리합니다.
• 변환과 불투명도를 애니메이션화합니다폭/높이/상단/왼쪽이 아닙니다. GSAP는 기본적으로 다음을 수행합니다 x, y, 그리고 scale — 브라우저 컴포지터는 리플로우 없이 이를 처리합니다.
• 존중은 움직임을 선호합니다. 템플릿의 모든 위젯이 이를 확인하고 정적 콘텐츠를 제공합니다. 접근성뿐만 아니라 배터리 수명도 마찬가지입니다.
• 총 비용은 작습니다. GSAP 코어 + ScrollTrigger + SplitText 는 대략 90KB 축소되어 대부분의 단일 영웅 이미지보다 적습니다. 템플릿을 린 페이지와 페어링하면 Core Web Vitals 를 편안하게 통과 할 수 있습니다; 우리의 애니메이션 효과 가이드 더 넓은 속도 그림을 다룹니다.

GSAP가 필요한 것보다 더 많은 느낌이 든다면 Master Addons도 즉시 코드 없음 모션을 제공합니다 입구 애니메이션, 부동 효과 (프로), 그리고 애니메이션 시스템 — 설정이 0입니다. GSAP는 사전 설정이 충분하지 않을 때를 위한 것입니다.

비디오 튜토리얼 가이드라인

어쩌면 당신은 독서를 선호 하지 않습니다, 그래서 나는 다운로드 하 고 당신의 Elementor 편집기에서 GSAP 애니메이션으로 위젯을 설치 하는 방법에 당신을 위해 비디오를 만듭니다.

자주 묻는 질문

템플릿으로 시작한 다음 자신만의 템플릿을 구축하세요

6 개의 위젯을 가져와서 깰 수 있고 다시 빌드합니다. 위젯 빌더를 이해하는 가장 빠른 방법은 가져오기 후에 영웅 위젯을 열고 19 가 HTML 탭에서 토큰에 매핑하는 방법을 확인하는 것입니다. 그 후,모든 CodePen 북마크 및 모든 AI 생성 섹션이 위젯 후보가 됩니다.

마스터 애드온은 30,000 + WordPress 사이트에서 실행되며 전체 Widget Builder 는 Pro 버전과 함께 제공됩니다. 에 포함 된 모든 것을보십시오 위젯 및 확장 페이지위의 템플릿을 다운로드하면 첫 번째 사용자 정의 GSAP 위젯이 오늘 라이브로 제공될 수 있습니다.