블로그스팟에 GSAP 테스트

GSAP 예제

HTML CSS JavaScript GSAP

<div id="animateMe" style="background-color: pink; height: 100px; width: 100px;"></div> <script> gsap.to("#animateMe", { duration: 2, x: 200, rotation: 360, ease: "bounce" }); </script>

박스가 2초 동안 오른쪽으로 이동하면서 회전하고, 끝날 때 튀는 효과:

HTML CSS JavaScript GSAP

<div class="box" style="background-color: pink; height: 100px; width: 100px;"></div> <script> gsap.to(".box", { duration: 2, x: 300 }); </script>

기본적인 이동 애니메이션:

HTML CSS JavaScript GSAP

<div class="circle" style="background-color: pink; height: 100px; width: 100px;"></div> <script> gsap.to(".circle", { duration: 1, rotation: 360 }); </script>

회전 애니메이션:

HTML CSS JavaScript GSAP

<div class="circle" style="background-color: pink; height: 100px; width: 100px;"></div> <div class="square" style="background-color: pink; height: 100px; width: 100px;"></div> <script> gsap.to(".square", { duration: 1.5, scale: 1.5 }); </script>

크기 변경 애니메이션:

HTML CSS JavaScript GSAP

<div class="circle" style="background-color: pink; height: 100px; width: 100px;"></div> <div class="element" style="background-color: pink; height: 100px; width: 100px;"></div> <script> gsap.to(".element", { duration: 1, opacity: 0 }); </script>

페이드 인/아웃 효과:

HTML CSS JavaScript GSAP

<div class="item" style="background-color: pink; height: 100px; width: 100px;"></div> <script> gsap.to(".item", { duration: 2, x: 100, y: 50, rotation: 45, scale: 1.2 }); </script>

여러 속성을 동시에 애니메이션:

HTML CSS JavaScript GSAP

<div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <script> let tl = gsap.timeline(); tl.to(".box1", {duration: 1, x: 100}) .to(".box2", {duration: 1, y: 50}) .to(".box3", {duration: 1, rotation: 90}); </script>

타임라인을 사용한 연속 애니메이션:

스크롤 트리거 애니메이션:

HTML CSS JavaScript GSAP

<div class="text" style="background-color: pink; height: 100px; width: 100px;">test</div> <script> let splitText = new SplitText(".text", {type: "chars"}); gsap.from(splitText.chars, { duration: 0.6, opacity: 0, scale: 0, y: 80, rotationX: 180, transformOrigin: "0% 50% -50", stagger: 0.01 }); </script>

텍스트 분할 애니메이션:

test

※ 이 사이트의 모든 포스팅은 협찬 및 유료광고를 포함하고 있지 않습니다. ※개인 취향에 따른 리뷰이니, 부디 참고만 하시길!

daily-inklings 전체 글 보기

이글은 1월 14, 2025 에 최종으로 업데이트된 글입니다.