Animation & GSAP

스킬바 UI 스킬바는 포트폴리오 사이트에서 기술 숙련도를 시각적으로 보여주는 UI 요소이다. 스크롤 위치에 따라 막대나 원이 채워지는 애니메이션을 구현한다. 1. 막대형 스킬바 스크롤이 특정 위치에 도달하면 막대가 늘어나면서 퍼센트 숫자가 올라가는 애니메이션이다. Note: jQuery 3 기반의 막대형 스킬바를 만들어줘. 조건은 다음과 같아. 1) 프로그레스 바 3개를 세로로 배치하고, 각각 목표 퍼센트를 data-rate 속성으로 지정한다(30%, 90%, … 더 읽기

1. gsap gsap공식사이트 gsap코드펜 gsap치트시트 gsap의 모든 기능이 있는 cdn 링크 웹 브라우저에서 애니메이션을 구현하기 위한 자바스크립트 라이브러리 기존 CSS나 순수 자바스크립트보다 탁월한 퍼포먼스를 발휘할 수 있도록 최적화 된 애니메이션 전용 라이브러리이며, HTML5와 Flash 두 개의 플랫폼에서 사용할 수 있다. GreenSock Engaging the Internet GASP은 애니메이션을 쉽게 적용할 수 있는 라이브러리로 탁월한 퍼포먼스로 알려져 있다. gsap.to() 메소드를 이용해 … 더 읽기

GSAP(GreenSock Animation Platform)은 웹에서 가장 많이 쓰이는 JavaScript 애니메이션 라이브러리이다. CSS나 순수 JavaScript보다 탁월한 퍼포먼스를 발휘할 수 있도록 최적화된 애니메이션 전용 라이브러리이며, 12만 개 이상의 사이트에서 사용되고 있다. 2024년 10월 Webflow가 GSAP을 인수했다. 2025년 4월 30일부터 GSAP 3.13 버전과 함께 모든 플러그인이 100% 무료로 전환되었다. 이전에 유료였던 SplitText, MorphSVG 등도 상업 프로젝트에서 무료로 사용할 수 … 더 읽기

텍스트 애니메이션 결과가 눈에 즉시 보이는 단계다. SplitText — 글자 분해 등장 Note: GSAP SplitText.create()를 사용해서 h1 제목 텍스트를 글자 단위로 분해하고, 각 글자가 아래에서 위로 순차적으로 페이드인하는 애니메이션을 만들어줘. stagger 0.03초, ease는 power3.out으로 설정하고, 애니메이션 완료 후 revert()로 DOM을 복구해줘. Tip: React + @gsap/react의 useGSAP 훅을 사용해서 SplitText.create()로 h1 제목 텍스트를 글자 단위로 분해하고, … 더 읽기