Fade in
움직이지 않고 제자리에서
투명했다가 서서히 선명해져요
LOOP🎁 쿠폰이 도착했어요
10,000원 할인
오늘 자정까지 쓸 수 있어요
이럴 때 써요
- 앱을 켰을 때 첫 화면이 부드럽게 보일 때
- 쿠폰·알림 상자가 조용히 나타날 때
- 카드뉴스에서 다음 문장이 차분히 뜰 때
#페이드인#FadeIn#등장효과#부드러운시작
Slide in
화면 바깥에 숨어 있다가
옆에서 스르륵 미끄러져 들어와요
이럴 때 써요
- 쇼핑몰 첫 화면에 특가 띠가 들어올 때
- 메신저에서 새 알림이 옆에서 밀려올 때
- 발표 자료에서 그림이 옆에서 등장할 때
#슬라이드인#SlideIn#등장효과#배너
Scale in
가운데서 작게 시작해서
원래 크기로 쑥 커지며 나타나요
이럴 때 써요
- 결제 후 '주문 완료' 창이 뜰 때
- 게임에서 '레벨 업!' 표시가 튀어나올 때
- 상세페이지에서 할인 딱지를 눈에 띄게 보여줄 때
#스케일인#ScaleIn#등장효과#완료알림
Stagger
여러 항목이 한 번에 뜨지 않고
하나씩 순서대로 차례차례 나타나요
LOOP✓무료 배송
✓오늘 주문, 내일 도착
✓30일 무료 반품
✓구매 시 포인트 적립
이럴 때 써요
- 서비스 장점을 3~4개 나열할 때
- 상품 목록이 처음 보일 때
- 메뉴 버튼을 눌러 목록이 펼쳐질 때
#스태거#Stagger#시간차등장#리스트애니메이션
Easing
같은 거리를 가도 속도를 조절해
천천히 출발하고 부드럽게 멈춰요
이럴 때 써요
- 움직임이 로봇처럼 딱딱해 보일 때
- 엘리베이터가 서서히 멈추는 느낌을 내고 싶을 때
- 홈페이지 모든 움직임의 느낌을 통일할 때
#이징#Easing#속도곡선#자연스러운움직임
Spring animation
용수철처럼 살짝 지나쳤다가
출렁출렁 되돌아오며 멈춰요
LOOP🛒
장바구니에 담았어요
니트 가디건 · ₩29,900
이럴 때 써요
- 장바구니에 담았다는 알림이 뜰 때
- 아이폰에서 앱 창이 튕기듯 열릴 때
- 딱딱한 화면에 생기를 조금 더하고 싶을 때
#스프링#SpringAnimation#탄성움직임#알림등장
Bounce
공처럼 떨어져서 바닥에
통·통·통 튀다가 멈춰요
이럴 때 써요
- 택배 도착·선물 도착을 신나게 알릴 때
- 아이 대상 학습 앱의 정답 표시
- 이벤트 페이지에서 상품을 귀엽게 등장시킬 때
#바운스#Bounce#튀는효과#귀여운등장
Count up
숫자가 0부터 시작해서
목표 숫자까지 촤라락 올라가요
이럴 때 써요
- '누적 회원 12만 명' 같은 자랑 숫자를 보여줄 때
- 대시보드에서 오늘 방문자 수를 띄울 때
- 연말 결산 카드뉴스의 핵심 숫자
#카운트업#CountUp#숫자애니메이션#대시보드
Pulse
심장이 뛰듯 둘레로
고리가 계속 퍼져 나가요
이럴 때 써요
- 쇼핑 앱의 '라이브 방송 중' 표시
- 지도 앱에서 내 위치를 알려줄 때
- 대시보드에서 지금 켜져 있는 항목 표시
#펄스#Pulse#반복강조#실시간표시
Shake
잘못 입력하면 칸이
고개를 젓듯 좌우로 흔들려요
이럴 때 써요
- 비밀번호가 틀렸을 때
- 꼭 써야 하는 칸을 비우고 넘어가려 할 때
- 휴대폰 잠금 화면에서 번호가 틀렸을 때
#셰이크#Shake#오류표시#입력확인
Crossfade
앞 사진이 흐려지는 동안
다음 사진이 겹쳐서 짙어져요
이럴 때 써요
- 상품 사진을 다른 색상으로 바꿔 보여줄 때
- 홈페이지 첫 화면 큰 사진을 계속 바꿀 때
- 발표 자료에서 전·후 비교 사진을 넘길 때
#크로스페이드#Crossfade#화면전환#사진교체
Page transition
다른 페이지로 넘어갈 때
뚝 끊기지 않고 부드럽게 바뀌어요
LOOPcafebom.kr/home
메뉴
아메리카노₩4,500
카페라떼₩5,000
딸기 라떼₩6,200
이럴 때 써요
- 카페 홈페이지에서 '메뉴 보기'를 눌렀을 때
- 앱에서 다음 단계 화면으로 넘어갈 때
- 웹으로 만든 발표 자료의 장 넘김
#페이지전환#PageTransition#화면전환#홈페이지
Shared element transition
누른 사진이 그대로 커지면서
다음 화면의 큰 사진이 돼요
LOOP딸기 케이크
₩28,000
생딸기를 듬뿍 올렸어요
장바구니 담기
🍓
이럴 때 써요
- 쇼핑 앱에서 상품을 눌러 자세히 볼 때
- 사진첩에서 작은 사진을 크게 열 때
- 상세페이지로 들어가는 흐름을 이어 보이게 할 때
#공유요소전환#SharedElementTransition#화면전환#상세페이지
Layout animation
순서가 바뀌면 순간이동하지 않고
새 자리로 스르륵 미끄러져 가요
LOOP인기순낮은 가격순
🍱불고기 도시락₩6,900
🥗닭가슴살 샐러드₩8,200
🍜얼큰 라면₩4,500
이럴 때 써요
- 배달앱에서 정렬 순서를 바꿀 때
- 할 일 목록에서 하나를 지우면 아래가 올라올 때
- 대시보드 순위표 순서가 바뀔 때
#레이아웃애니메이션#LayoutAnimation#자리이동#정렬
Card flip
카드가 빙그르 뒤집히면서
뒷면에 숨은 내용이 보여요
LOOP당첨!
☕ 아메리카노 1잔
쿠폰함에 넣어 드렸어요
이럴 때 써요
- 이벤트 페이지 '뒤집어서 경품 확인'
- 단어 암기 앱에서 뜻을 확인할 때
- 카드뉴스에서 질문 뒤에 답을 보여줄 때
#카드플립#CardFlip#뒤집기#이벤트
SVG line drawing
선이 펜으로 긋는 것처럼
처음부터 끝까지 그려져요
이럴 때 써요
- 대시보드 그래프가 처음 보일 때
- 손글씨 서명이 써지듯 보여줄 때
- 약도에서 가는 길을 따라 선을 그을 때
#라인드로잉#SVGLineDrawing#선그리기#그래프
Shape morphing
한 모양이 녹아내리듯
자연스럽게 다른 모양으로 바뀌어요
이럴 때 써요
- 음악 앱에서 ▶ 버튼이 ⏸로 바뀔 때
- 메뉴 ☰ 아이콘이 ✕로 바뀔 때
- 홈페이지 배경 무늬가 천천히 모양을 바꿀 때
#모핑#ShapeMorphing#모양변형#아이콘
Marquee
글자나 로고가 띠처럼 이어져
옆으로 끝없이 흘러가요
LOOP📢 공지오늘 오후 3시 앱 점검 예정 · 전 상품 무료 배송 진행 중 · 신규 가입하면 5천 원 쿠폰 · 오늘 오후 3시 앱 점검 예정 · 전 상품 무료 배송 진행 중 · 신규 가입하면 5천 원 쿠폰 ·
☕ 카페 봄날🥐 동네빵집🍜 한그릇🌷 꽃집 소소📚 책방 여름☕ 카페 봄날🥐 동네빵집🍜 한그릇🌷 꽃집 소소📚 책방 여름
함께하는 동네 가게들
이럴 때 써요
- 뉴스 화면 아래 흐르는 속보 자막
- 쇼핑몰 맨 위 '무료 배송' 공지 띠
- 홈페이지에 함께하는 회사 로고를 줄지어 보여줄 때
#마키#Marquee#흐르는글자#공지띠