TOP

CENTER

BOTTOM

Scroll Transform

  • 레이어의 윗부분이 화면에 보이기 시작해 아랫부분까지 모두 보일 때까지, 효과가 점진적으로 적용됩니다.

  • 스크롤을 해보면서 레이어가 화면 전체에 걸쳐 나타나는 동안의 변화를 확인해보세요.

FROM

TO

  • 레이어의 윗부분이 화면에 보이기 시작해 아랫부분까지 모두 보일 때까지, 효과가 적용됩니다.

  • Spring 트랜지션으로 변화가 더 부드럽고 탄력 있게 연출됩니다.

FROM

TO

SECTION-1

FROM

TO

  • 섹션이 화면 상단에 닿은 순간부터, 화면을 통과할 때까지 효과가 점진적으로 적용됩니다.

  • 스크롤을 해보며 섹션이 지나가는 동안의 변화를 확인해보세요.

SECTION-2

ENTER

EXIT

  • 섹션이 화면 중앙에 닿은 순간부터, 화면을 통과할 때까지 효과가 점진적으로 적용됩니다.

  • 스크롤을 해보며 섹션이 지나가는 동안의 변화를 확인해보세요.

SECTION-3

ENTER

EXIT

  • 섹션이 화면 하단에 닿은 순간부터, 화면을 통과할 때까지 효과가 점진적으로 적용됩니다.

  • 스크롤을 해보며 섹션이 지나가는 동안의 변화를 확인해보세요.

SECTION-4

ENTER

EXIT

  • 섹션 4에서 레이어가 화면 중앙에 도달하면, 점차 커지고 또렷해집니다.

  • 이어지는 섹션 5를 지나며 다시 작아지면서 자연스럽게 사라지는 흐름으로 연출됩니다.

SECTION-5

ENTER

EXIT

  • 섹션 4에서 레이어가 화면 중앙에 도달하면, 점차 커지고 또렷해집니다.

  • 이어지는 섹션 5를 지나며 다시 작아지면서 자연스럽게 사라지는 흐름으로 연출됩니다.

Create a free website with Framer, the website builder loved by startups, designers and agencies.