Interactive/GSAP
-
애니메이션 코드를 효율적으로 작성하기 위한 팁 | CSS-TRICKSInteractive/GSAP 2021. 5. 6. 18:11
애니메이션 라이브러리 사용 일부 개발자는 CSS 전환, CSS 애니메이션 또는 웹 애니메이션 API( WAAPI ) 와 같은 기본 브라우저 기술을 사용하여 라이브러리를 로드하지 않고도 동일한 작업을 수행 할 수 있기 때문에 애니메이션 라이브러리를 사용하는 것이 낭비라고 생각합니다. 어떤 경우에는 사실입니다. 그러나 고려해야 할 몇 가지 다른 요소는 다음과 같습니다. 브라우저 버그, 불일치 및 호환성 : GSAP와 같은 애니메이션 라이브러리는 이러한 문제를 해결하고 보편적으로 호환됩니다. IE9에서 모션 경로를 사용할 수도 있습니다! SVG 요소의 transform-origin 처리, 경로 스트로크 측정, Safari의 3D origin 등, 크로스 브라우저 문제와 관련하여 많은 문제가 있는 영역이 있습니..
-
스크롤 트리거 - 플러그인 | GSAPInteractive/GSAP 2021. 4. 5. 18:06
ScrollTrigger는 최소한의 코드로 놀라운 스크롤 기반 애니메이션을 만듭니다 . 또는 애니메이션과 무관하더라도 스크롤과 관련된 모든 것을 트리거합니다. 가장 일반적인 ScrollTrigger 실수에 대해서도 학습하여 게임에서 앞서 나가세요. 주요 기능 특정 요소에 애니메이션을 연결하여 해당 요소가 뷰포트에 있을 때만 재생되도롭 합니다. 이렇게 하면 성능이 향상되고 아름다운 애니메이션을 실제로 볼 수 있습니다. ScrollTrigger는 정의된 영역에 들어가거나 나갈 때 애니메이션에 대한 작업(재생, 일시 중지, 다시 시작, 되감기, 완료, 재설정)을 수행하거나 스크러버(scrub: true)처럼 작동하도록 스크롤바에 직접 연결할 수 있습니다. 애니메이션과 스크롤바 사이의 연결을 부드럽게하여 "추적..
-
가장 일반적인 GSAP 실수 - 학습센터 | GSAPInteractive/GSAP 2021. 4. 2. 15:30
from () 논리 문제 만들기 일반적으로 .fromTo() 대신 .to() 및 .from() 트윈을 사용하는 것이 현명합니다. 왜냐하면 더 동적이기 때문입니다. 트윈이 처음으로 렌더링할 때 현재 발생하는 모든 것에서 시작 또는 종료 값을 가져옵니다. 효율적인 애니메이션을 만드는 것에 대한 기사 중 하나입니다. 그러나 이러한 동적 특성은 몇 가지 시나리오에서 현명하지 않을 수 있습니다. 먼저, .from() 트윈은 제공된 값에서 현재 값으로 이동합니다. 아래 예를 살펴보세요. document.querySelector("button").addEventListener("click", () => gsap.from(".box", {opacity: 0, duration: 3}) ); 한 번 클릭하여 재생 해보세요..
-
GSAP 시작하기 - 학습센터 | GSAPInteractive/GSAP 2021. 3. 29. 11:36
GreenSock Animation Platform(GSAP)은 JavaScript가 만질 수 있는 모든 것(CSS 속성, SVG, React, 캔버스, 일반 객체 등)을 애니메이션화하고 수많은 브라우저 불일치를 해결하며, 이 모든 것을 놀라운 속도(jQuery보다 최대 20배 빠른 속도)로 해결한다. GSAP가 1,000,000개의 사이트와 많은 주요 브랜드에서 사용되는 이유를 확인하세요. 학습 곡선를 따라 가면 코드로 애니메이션을 만드는 것이 얼마나 재미있을 수 있는지 알게 될 것입니다. 시간을 낼 만한 가치가 있다고 약속합니다. GSAP는 속성 조작자애니메이션은 궁극적으로 초당 여러 번 속성 값을 변경함으로써 어떤 것이 움직이고, 희미해지고, 회전하는 것처럼 보이게 합니다. GSAP는 시작 값, ..