모션 프리셋

stable

요소 타입별, 페이지 타입별 애니메이션 설정을 미리 정의한 프리셋 시스템

@hua-labs/motion-corev2.0.0

Import

import {
  MOTION_PRESETS,
  PAGE_MOTIONS,
  mergeWithPreset,
  getPagePreset,
  getMotionPreset,
} from '@hua-labs/motion-core'

MOTION_PRESETS

요소 타입별 기본 모션 설정을 정의한 레코드다.

타입

type PresetConfig = Record<string, MotionPreset>

interface MotionPreset {
  entrance: MotionType
  delay: number
  duration: number
  hover: boolean
  click: boolean
}

type MotionType = 'fadeIn' | 'slideUp' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'bounceIn'

내장 프리셋

키	입장 효과	딜레이	지속 시간	호버	클릭
`hero`	`fadeIn`	200ms	800ms	X	X
`title`	`slideUp`	400ms	700ms	X	X
`button`	`scaleIn`	600ms	300ms	O	O
`card`	`slideUp`	800ms	500ms	O	X
`text`	`fadeIn`	200ms	600ms	X	X
`image`	`scaleIn`	400ms	600ms	O	X

Usage

import { MOTION_PRESETS } from '@hua-labs/motion-core'

const heroPreset = MOTION_PRESETS.hero
// { entrance: 'fadeIn', delay: 200, duration: 800, hover: false, click: false }

const buttonPreset = MOTION_PRESETS.button
// { entrance: 'scaleIn', delay: 600, duration: 300, hover: true, click: true }

PAGE_MOTIONS

페이지 타입별로 페이지 내 요소 구성을 미리 정의한 레코드다. useSimplePageMotion에서 내부적으로 사용한다.

타입

type PageType = 'home' | 'dashboard' | 'product' | 'blog'
type PageMotionsConfig = Record<string, PageMotionElement>

interface PageMotionElement {
  type: string
  entrance?: MotionType
  hover?: boolean
  click?: boolean
  delay?: number
  duration?: number
  threshold?: number
}

home 프리셋

PAGE_MOTIONS.home = {
  hero: { type: 'hero' },
  title: { type: 'title' },
  description: { type: 'text' },
  cta: { type: 'button' },
  feature1: { type: 'card' },
  feature2: { type: 'card' },
  feature3: { type: 'card' }
}

dashboard 프리셋

PAGE_MOTIONS.dashboard = {
  header: { type: 'hero' },
  sidebar: { type: 'card', entrance: 'slideLeft' },
  main: { type: 'text', entrance: 'fadeIn' },
  card1: { type: 'card' },
  card2: { type: 'card' },
  card3: { type: 'card' },
  chart: { type: 'image' }
}

mergeWithPreset()

프리셋 위에 커스텀 설정을 병합한다. 커스텀 값이 프리셋 값을 덮어쓴다.

Signature

function mergeWithPreset(
  preset: MotionPreset,
  custom?: Partial<MotionPreset>
): MotionPreset

Parameters

파라미터	타입	설명
`preset`	`MotionPreset`	기준이 될 프리셋
`custom`	`Partial<MotionPreset>`	덮어쓸 커스텀 값

Usage

import { mergeWithPreset, MOTION_PRESETS } from '@hua-labs/motion-core'

const customCard = mergeWithPreset(MOTION_PRESETS.card, {
  entrance: 'scaleIn',
  duration: 600,
  hover: false
})
// { entrance: 'scaleIn', delay: 800, duration: 600, hover: false, click: false }

getPagePreset()

페이지 타입으로 PAGE_MOTIONS 레코드에서 설정을 가져온다.

Signature

function getPagePreset(pageType: PageType): PageMotionsConfig

Usage

import { getPagePreset } from '@hua-labs/motion-core'

const homeConfig = getPagePreset('home')
// { hero: { type: 'hero' }, title: { type: 'title' }, ... }

getMotionPreset()

요소 타입 문자열로 MOTION_PRESETS에서 프리셋을 가져온다. 알 수 없는 타입은 text 프리셋을 반환한다.

Signature

function getMotionPreset(type: string): MotionPreset

Usage

import { getMotionPreset } from '@hua-labs/motion-core'

const heroPreset = getMotionPreset('hero')
const unknownPreset = getMotionPreset('unknown') // text 프리셋 반환

Notes

MOTION_PRESETS의 키는 useSmartMotion의 type 파라미터와 동일하다.
PAGE_MOTIONS의 각 요소는 type 필드를 통해 MOTION_PRESETS의 기본값을 상속한다.
커스텀 페이지 타입이 필요하면 useCustomPageMotion에 직접 구성 객체를 전달하면 된다.