라이브러리/framer-motion

아이템 우측 하단에 원을 클릭 시 해당 원의 크기가 커지며 화면을 덮는 애니메이션을 구현하였습니다.import { motion } from "framer-motion";import React, { useState } from "react";import styled from "styled-components";const Item = () => { // 원 클릭 여부 state const [isClick, setIsClick] = useState(null); return ( // 아이템 {/** * 아이템 우측 하단 원 * 클릭 시 isClick 상태가 변경된다. * animate는 isClick이 true일 경우 애니메이션 객체를 전달하도록 설정..

import React, { useState, useEffect } from 'react';import { motion } from 'framer-motion';const ConditionalAnimationComponent = () => { const [isVisible, setIsVisible] = useState(false); return ( {isVisible ? '애니메이션 실행' : '애니메이션 대기 중'} );};export default ConditionalAnimationComponent;

// 슬롯텍스트 모션 컴포넌트const SlotTextMotion = () => { // 슬롯에 표시될 문자열을 담은 배열 const majorArray = [1,2,3,4,5,6,7,8,9,10]; // 현재 보여지고 있는 슬롯의 인덱스를 나타내는 상태 변수 const initNum=Math.floor(Math.random() * majorArray.length); const [currentIndex, setCurrentIndex] = useState(initNum); const [index,setIndex]=useState(1);// // 애니메이션이 완료되면 호출되는 함수 const onAnimationComplete = async () => { const randNum = M..