[Framer X Code] Override로 Hover & Click Effect 만들기

Override 생성하는 방법을 모르신다면... Code Override 만들기 게시글을 먼저 보고 와주세요. 

• Code Override 만들기 : https://minny-it.tistory.com/4 

[Framer X Code] Code Override 만들기

 

0. 코드 Override 생성하기

우선 Override 파일을 만들어줍니다. 저는 Effects라고 이름을 지었습니다. 

 

1. Override 코드 작성하기

저는 Override 함수의 이름을 HTEffect로 지었습니다. (그냥 제 뇌피셜로 적어둔겁니다 ㅎ헣)

Hover와 Tap 효과를 한 함수에 넣은 이유는 한 요소에 오버라이드는 1개만 적용할 수 있기 때문입니다. 

import type { ComponentType } from "react"

export function HTEffect(Component): ComponentType {
    return (props) => {
        return (
            <Component
                {...props}
                //Hover Effect
                whileHover={{ scale: 1.05, }}
                //Tap Effect
                whileTap={{ scale: 0.95, opacity: 0.8, }}
            />
        )
    }
}

Hover일 때 효과를 whileHover={{ ... }} 에 적어주고, Tap했을 때의 효과를 whileTap={{...}} 에 적어주시면 됩니다. 

저는 Hover일 때 scale을 1.05로 키워줬고, Tap했을 때 scale을 0.95로 줄이고, opacity를 0.8로 해줬습니다. 

 

2. Override 적용하기

Effect 적용하려는 요소에 override를 적용시키면 됩니다. 

 

3. Override 확인하기

Override가 적용된 화면을 미리보기(Cmd + P, Ctrl + P, 우측 상단 재생버튼)한 후 override가 제대로 적용되었는지 확인하시면 됩니다.