모핑 & 변형 애니메이션
스케일 변형
(Scale Transform)
스케일 변형 효과는 요소들이 크기를 동적으로 변화시키며 시각적 강조와 상호작용성을 제공하는 핵심적인 애니메이션 기법입니다.
텍스트, 이미지, 버튼 등 다양한 요소들이 부드럽게 확대되거나 축소되어 사용자의 관심을 끌고 몰입감을 높입니다.
아래 컨트롤러로 스케일 변형의 강도, 애니메이션 속도, 호버 효과를 조절하며 다양한 스케일 변형 효과를 직접 경험해보세요.
스케일 변형의 강도를 조절합니다. 숫자가 클수록 더 극적인 크기 변화를 만듭니다.
스케일 변형 애니메이션의 속도를 조절합니다. 숫자가 클수록 더 느린 변형 효과를 만듭니다.
마우스 호버 시 스케일 변형 정도를 조절합니다. 숫자가 클수록 더 큰 호버 효과를 만듭니다.
화면을 내려 다양한 예시를 확인해보세요
▼기본 텍스트 스케일 변형
SCALE TRANSFORM
이미지 스케일 변형
이미지 위 대형 텍스트 스케일 변형
카드 스케일 변형
스케일링 카드
카드 전체와 내부 텍스트가 각각 다른 비율로 확대되어 세밀한 상호작용 경험을 제공합니다.
버튼 스케일 변형
그리드 스케일 변형
그리드 아이템 1
그리드 아이템 2
그리드 아이템 3
그리드 아이템 4
그리드 아이템 5
그리드 아이템 6
복합 스케일 변형
COMPLEX SCALING
배경, 콘텐츠, 텍스트가 각각 다른 비율과 타이밍으로 확대되는 복합적인 스케일 효과