TIRA는 그리스 산토리니에 존재하는 여섯 마을을 배경으로 한 티라미수 전문 디저트 브랜드입니다. 산토리니 마을들의 특징과 색상, 형태 등을 반영하여 패키지의 디자인과 제품의 맛이 각 마을과 가장 잘 부합하도록 선정된 다양한 티라미수 패키지를 제공합니다.

GSAP를 이용해 스크롤에 따라 부드럽게 반응하는 브랜드 소개 페이지 구현. 제품 소개와 장바구니, 가격 조정 기능 구현. 서비스 가입과 프로필 제작 및 수정 기능 구현

사용자 스크롤 시 세로가 아닌 가로로 화면이 자연스럽게 스냅 되는 독특한 UX를 제공하기 위한 의도입니다. 각 섹션의 요소들을 가로로 배치 후 GSAP의 to 메서드를 이용해 요소가 X축으로 이동하도록 설정하였고, ScrollTrigger의 snap과 pin속성을 이용해 화면 고정 시 부드러운 동작을 구현하여 해결했습니다.

JavaScript, JQuery, GSAP, Pug, SCSS

Express, MongoDB

Flyio