Lpla 개발 블로그

JavaScript/실전

[GSAP] 타이핑 효과

GSAP의 TextPlugin으로 타이핑 효과를 만들 수 있다. See the Pen TextPlugin - basic by lpla (@lpla) on CodePen. 이 플러그인을 이용하면 간단하게 타이핑 효과를 만들 수 있지만 한글은 'ㅌㅏㅇㅣㅍㅣㅇ' 으로 입력되지 않고 '타이핑' 처럼 자음모음이 합쳐져 입력 되는데 이런 작은 디테일에서 아쉬움이 있다. sdfsdfSee the Pen TextPlugin - basic by lpla (@lpla) on CodePen. 다행히 구글에 검색해보면 한글 타이핑을 할 수 있도록 누군가 친절하게 만들어 놓은 스크립트가 있다. See the Pen 타이핑 by lpla (@lpla) on CodePen. 하지만 이 스크립트는 스크롤 이벤트 없이 페이지가 로드되..

JavaScript/실전

[GSAP] 숫자 카운트 (ScrollTrigger)

GSAP로 숫자 카운트 효과를 만들 수 있다. 1. 해당 요소에 스크롤시 숫자 카운트 See the Pen [GSAP] count - onUpdate by lpla (@lpla) on CodePen. 2. 해당 요소에 스크롤시 숫자 카운트 & 숫자 초기화 See the Pen [GSAP] count - onUpdate & toggleActions by lpla (@lpla) on CodePen. 3. 해당 요소에 스크롤시 숫자 카운트 & 스크롤에 따른 숫자 변화 See the Pen [GSAP] count - onUpdate & scrub by lpla (@lpla) on CodePen. ------- 21.08.28 추가 ------- 4. 소수 자리 표현 See the Pen [GSAP] count ..

JavaScript/실전

[GSAP] 예제 - Pin과 timeline으로 요소 등장

GSAP ScrollTrigger의 Pin과 timeline을 사용하여 효과를 구현하고자 한다. 어떤 지점에 도달하면 스크롤 하더라도 배경은 유지된 채, 수평 방향에서 요소가 등장하는 효과다. 배경을 유지하는 것은 pin, 요소가 등장하는 것은 timeline으로 구현할 수 있다. 최종 결과물 1. 준비 head에 GSAP와 ScrollTrigger를 추가하고 하단에 자바스크립트 외부 파일을 추가했다. 2. HTML, CSS section1 section2 1 2 3 section3 section4 body에 section 요소 4개를 추가했다. 여기서 화면이 고정될 요소는 section2다. 즉 pin을 section2에 부여할 것이다. 그리고 pin이 유지되는 동안 서서히 나타나게 될 요소들은 box..

JavaScript/실전

[GSAP] 애니메이션 ScrollTrigger - 자주 묻는 질문

gsap의 자주 묻는 질문 중에 몇 가지를 간추려 정리해봤다. Most Common ScrollTrigger Mistakes Are you guilty of any of the most common mistakes people make in their ScrollTrigger code? Creating to() logic issues Nesting ScrollTriggers inside multiple timeline tweens Using one ScrollTrigger or animation for multiple sections Forgetting to use functi greensock.com 1. 애니메이션이 뷰포트 중간에서 시작하고 화면을 벗어나면 초기화하고 싶습니다. GSAP는 스크롤트리거..

JavaScript/실전

[GSAP] 애니메이션 사용법 (중급 - ScrollTrigger)

지난 시간에 GSAP로 애니메이션 효과를 만드는 법을 공부했다. 하지만 어떤 애니메이션 효과를 만들지 만큼 중요한 것이 언제 효과를 보여줄 것인가이다. 내 화면은 사이트 헤더 쪽에 있는데 푸터 쪽에서 애니메이션이 실행되는 사태를 막아야 한다. 그렇기 때문에 ScrollTrigger가 중요하다. 설치 공식 사이트 혹은 CDN 혹은 npm 등 편한 방법으로 ScrollTrigger.js나 ScrollTrigger.min.js 를 다운로드한다. Docs Documentation for GreenSock Animation Platform (GSAP) greensock.com gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life..

JavaScript/실전

[GSAP] 애니메이션 사용법 (기초)

GSAP? GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다. 하지만 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나이다. GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋고 사용법도 간단하다고 주장한다. 하지만 초보자들에게 그 간단한 사용법 조차도 어렵고 헷갈리는 것이 사실이다. 공식 사이트에서 배워보려 해도 방대한 문서 양에 어디서부터 시작해야 할지 막막하다. GSAP를 배우려는 목적은 멋진 애니메이션 효과를 구현하고 싶기 때..