AutoAnimate - Add motion to your apps with a single line of code
Formkit
한줄의 코드로 모션 추가하기 (formkit/auto-animate)
UI/UX 에서 모션(애니메이션)은 사용자 경험을 향상시키기 위한 핵심 요소 중 하나입니다. 그래서 저 역시도 CSS의 속성인 transition이나, animation을 사용해서 직접 구현을 했었는데요. 소개해 드리는 라이브러리는 단 한 줄의 코드로 모션을 추가할 수 있는 라이브러리입니다.
useAutoAnimate라는 훅을 부모 엘리먼트의 ref 값으로 넣어주면 끝입니다. 자식 엘리먼트의 추가/삭제/이동 시 자동으로 애니메이션이 트리거 되는 방식입니다. CSS로 직접 구현하면 섬세한 작업이 가능하지만 일정 역시 소요되는 것이 사실인데요. 큰 일정 소요 없이, 어느 정도 생동감 있는 모션을 추가하고 싶을 때는 유용할 것 같습니다.
React, Vue, Svelte, Angular 등 다양한 라이브러리에서 사용이 가능합니다.
https://auto-animate.formkit.com/
더 많은 콘텐츠를 보고 싶다면?
이미 회원이신가요?
2023년 6월 29일 오후 11:09
댓글 0
함께 읽은 게시물
시니어가 될 수 없는 주니어 개발자의 특징
시니어가 될 수 없는 개발자는 어떤 특징을 갖고 있을까요?
관련 글 읽고 정리하면서 제 생각도 함께 올립니다.
1️⃣ 수동적인 사람
수동적인 개발자는 다른 사람과 팀원이 되어 함께 일할 수 있는 스킬이 부족하다. 다른 사람과 의사소통이 제대로 되지 않으면 결국 좋은 성과를 내지 못한다.
2️⃣ 변화를 거절하는 사람
새로운 일에 도전하지 않고 하던 일만 하고 변화를 싫어하는 사람은 성장하지 않는다.
3️⃣ ‘Ownership’이 없는 사람
많은 개발자가 본인 직무 외에 더 많은 일을 떠맡아서 하기도 한다. 반대로 일부러... 더 보기
이 글 하나면 끝, SQL 추천 책부터 코테 노하우까지 완전 정복하기
안
... 더 보기
