Framer motion : 제스처(Gestures)에 대해서 (1) hover, focus, tap

Framer motion의 제스처는 사용자가 웹 페이지나 어플리케이션과 상호작용하는 방식을 얘기한다. Framer motion의 주요 제스처는 호버(hover), 포커스(focus), 탭(tap), 드래그(drap), 팬(pan) 등이 있다. 

제스처	설명
hover	마우스 커서가 요소 위에 올려졌을 때 발생하는 제스처
focus	요소가 포커스를 받을 때 발생하는 제스처
tap	사용자가 요소를 클릭하거나 터치했을 때 발생하는 제스처
drag	사용자가 요소를 클릭하고 드래그하여 위치를 변경할 수 있는 제스처
pan	사용자가 요소를 누르고 기존의 화면서에서 3픽셀 이동해야 인식되는 제스처

 

리액트에서 제공하는 onMouseOver, onClick, onFocus 이벤트 경우에는 framer motion 에서 정의된 프로퍼티와 함께 사용이 가능하다. 

 

Gestures예제

Hover관련 이벤트

이벤트	설명
onMouseOver	마우스가 요소 위로 올라갈 때 호출되는 함수
onMouseOut	마우스가 요소 밖으로 나갈 때 호출되는 함수
whileHover	Hover 상태일 때 적용할 애니메이션 상태 정의
onHoverStart	Hover가 시작될 때 호출되는 함수
onHoverEnd	Hover가 끝날 때 호출되는 함수

import { motion } from "framer-motion";
import styles from "./Comp01.module.css"

export default function Comp01() {
    return (
        <div>
            <motion.div className={styles.box}
                onMouseOver={() => console.log("onMouseOver시행됨")}
                onMouseOut={()=>console.log("onMouseOut시행됨")}
                whileHover={{scale: 1.1}}
                onHoverStart={() => console.log("onHoverStart시행됨")}
                onHoverEnd={()=>console.log("onHoverEnd시행됨")}
            />
        </div>
    );
}

 

Focus관련 이벤트

Framer motion에서 focus의 경우에는 input 태그나 button 태그에서만 한정적으로 애니메이션이 적용된다. 만약 다른 태그에 focus를 사용하고 싶다면 onFocus / onBlur 를 통해서 가능하다.

이벤트	설명
whileFocus	사용자가 요소를 포커스 했을 때 적용할 애니메이션 상태 정의
onFocus	요소가 포커스를 받을 때 호출되는 함수
onBlur	요소의 포커스가 해제될 때 호출되는 함수

 

다른 태그에 onFocus와 onBlur를 사용할 때에는 tabIndex 속성을 0으로 지정하여 포커스 가능한 요소로 만들어 주어야 한다. 

import { motion } from "framer-motion";
import styles from "./Comp01.module.css"
import { useState } from "react";

export default function Comp01() {
    const [isFocused, setIsFocused] = useState(false);

    return (
        <div className={styles.container}>
            <motion.input type="text"
            whileFocus={{backgroundColor: "rgb(173,216,230)"}}/>
            <motion.div className={styles.box}
            //whileFocus는 div에서 사용이 불가능하다.
            whileFocus={{scale: 1.1}}
            tabIndex={0}
            onFocus={() => {setIsFocused(true); console.log("onFocus 시행됨");}}
            onBlur={() => {setIsFocused(false); console.log("onBlur 시행됨");}}
            />
        </div>
    );
}

 

아래 예제에서 div는 whileFocus가 적용이 되지 않는 모습을 확인할 수 있다.

 

Tap관련 이벤트

이벤트	설명
onClick	요소가 클릭되었을 때 실행되는 함수
whileTap	사용자가 요소를 클릭하고 있는 동안 적용할 애니메이션 상태 정의
onTap	사용자가 요소를 클릭하거나 터치했을 때 호출되는 함수 (클릭 완료 시)
onTapStart	사용자가 요소를 클릭하기 시작했을 때 호출되는 함수 (클릭 시작 시)
onTapCancel	사용자가 클릭 중에 터치를 취소하거나, 클릭이 유효하지 않은 상태로 변했을 때 호출되는 함수

import { motion } from "framer-motion";
import styles from "./Comp01.module.css"

export default function Comp01() {

    return (
        <div className={styles.container}>
            <motion.div className={styles.box}
                onClick={() => console.log("onClick 실행됨")}
                whileTap={{ backgroundColor: "rgb(144, 238, 144)" }}
                onTap={() => console.log("onTap 실행됨")}
                onTapStart={() => console.log("onTapStart 실행됨")}
                onTapCancel={() => console.log("onTapCancle 실행됨")}
            />
        </div>
    );
}