Category: Motion

2021
0
04_UX 💅Motion

Svg로 Rounded rect형태의 progress bar 만들기 (feat. animation, path)

Progress bar를 구현해야한다.웹에서 찾을 수 있는 여러 예제들을 참고하여 사용해도 되지만, 커스텀하기 어려운 경우 직접 구현을 해야한다.바로 생각나는 엣지 케이스는 무엇일까 ? Rounded progress bar의 코너 부분채워지는 bar의 Corner 부분! base bar의 코너가 rouneded가 아니거나 + 채워지는 bar도 roun

2018
0
04_UX 💅Motion

Airbnb - lottie - bodymovin 웹에서 사용해보기

airbnb 앱을 쓰다보면 곳곳에서 다양한 애니메이션을 볼 수 있다. 한 서비스에 애니메이션이 있으면 있을수록 자연스러운 사용성 유도, 사용자의 감성에도 메세지를 전할 수 있고, 서비스의 브랜드가 더 기억에 오래남고 강해진다고 생각한다. 모션을 좋아하는 성향과 모션이 줄 수 있는 위의 특징때문에 곳곳에 모션을 넣는 것을 좋아하는데, 그러던 중 airbnb