블로그 전체목록

스크롤 인터랙션 디자인: 배경이 커지고 텍스트가 중앙 정렬되는 GSAP 효과

기술정보 25.07.02

✨ 스크롤할 때 텍스트가 가운데로! GSAP로 구현한 배경 확장 + 텍스트 중앙 정렬 애니메이션

웹사이트를 보다 세련되고 인터랙티브하게 만들고 싶으신가요?

오늘은 GSAP을 활용해서 스크롤할 때 배경이 넓어지고, 텍스트가 좌우에서 중앙으로 모이는 애니메이션을 만들어보는 방법을 소개합니다.

ScrollTrigger 플러그인을 활용하면, 사용자의 스크롤 동작에 맞춰 다양한 요소를 부드럽게 움직일 수 있어요.

개발자, 디자이너, 퍼블리셔 누구에게나 추천하는 방법입니다!

➰➰➰

✅ 오늘 구현할 애니메이션 기능 요약

✔️ 텍스트가 좌우에서 중앙으로 이동

✔️ 배경 영역이 점점 넓어짐 (clip-path)

✔️ 스크롤 구간에서 섹션이 고정(pin)되어 자연스럽게 연출

✔️ GSAP ScrollTrigger 사용

✏️ HTML 구조는 이렇게 생겼어요

1
2
3
4
5
6
7
8
<div class="full_img">
  <div class="bg"></div>
  <div class="b_txt">
    <p class="top_txt">Customer <span>First</span></p>
    <p class="btm_txt"><span>Sustainable</span> Growth</p>
  </div>
</div>
 
Colored by Color Scripter
cs

.full_img : 전체 섹션을 감싸는 영역

.bg : clip-path로 배경을 넓히는 요소

.top_txt, .btm_txt : 좌우에서 들어오는 텍스트

✏️ GSAP로 애니메이션 구현하기

✔️섹션 고정 + 배경 확장

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
gsap.to("#vision1012 .full_img", {
  scrollTrigger: {
    trigger: "#vision1012",
    pin: true,
    scrub: 0.5,
    start: "top top",
    end: "+=500"
  }
});
 
gsap.to("#vision1012 .bg", {
  clipPath: "inset(0% 0% 0% 0%)",
  scrollTrigger: {
    trigger: "#vision1012 .full_img",
    start: "top top",
    end: "+=500",
    scrub: 0.5
  }
});
 
Colored by Color Scripter
cs


✔️텍스트를 좌우에서 중앙으로 이동

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
gsap.to("#vision1012 .top_txt", {
  x: 0,
  scrollTrigger: {
    trigger: "#vision1012 .full_img",
    start: "top top",
    end: "bottom center",
    scrub: true
  }
});
 
gsap.to("#vision1012 .btm_txt", {
  x: 0,
  scrollTrigger: {
    trigger: "#vision1012 .full_img",
    start: "top top",
    end: "bottom center",
    scrub: true
  }
});
 
Colored by Color Scripter
cs

처음에는 transform: translateX(-100%) 또는 100%처럼 텍스트를 화면 밖에 두고,

스크롤을 하면서 점점 x: 0으로 이동시키는 방식이에요.


✏️ 스타일도 꼭 같이 설정해주세요

.full_img {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  clip-path: inset(40% 40% 40% 40%);
  transition: clip-path 0.3s ease;
}
.b_txt {
  position: relative;
  z-index: 2;
  color: #fff;
  text-align: center;
  padding-top: 40vh;
}
.top_txt, .btm_txt {
  font-size: 2.5rem;
  transform: translateX(-100%); /* 또는 100% */
}
 

Colored by Color Scripter

✅ 텍스트는 transform을 활용해서 시작 위치를 밖으로 빼두고,

✅ .bg에는 clip-path로 배경이 좁아지게 초기 설정한 다음 GSAP로 확장합니다.

⚡정리하자면

GSAP의 ScrollTrigger를 활용하면 이렇게 멋진 인터랙션도 꽤 간단하게 만들 수 있어요.
텍스트 등장, 배경 확장, 섹션 고정 등 다양한 효과를 한 번에 조합해보세요.

브랜드 메시지나 인트로 영역에 쓰면 임팩트가 확실합니다!

See the Pen Untitled by designkits (@designkits) on CodePen.

블로그 전체목록

최근 포스트