philip-cat/healthy_oil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

info component added animations with framer-motion

Browse Source
This commit is contained in:
philipcheung
2025-11-01 23:08:36 +08:00
parent ceff01ace1
commit 0b69188997
1 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/new_ui/info.tsx
View File

@@ -1,5 +1,11 @@
import { Box, Stack, Image, Flex, Text } from '@chakra-ui/react' import { Box, Stack, Image, Flex, Text } from '@chakra-ui/react'
import { useState } from 'react' import { useState } from 'react'
import { motion } from 'framer-motion'
const MotionStack = motion.create(Stack)
const MotionImage = motion.create(Image)
const MotionFlex = motion.create(Flex)
const MotionBox = motion.create(Box)
interface InfoData { interface InfoData {
id: number id: number
@@ -70,19 +76,27 @@ function Info() {
justifyItems={'center'} justifyItems={'center'}
> >
<Stack alignItems={'center'} gap={{ base: 4, sm: 4, md: 6, lg: 8, xl: 8 }}> <Stack alignItems={'center'} gap={{ base: 4, sm: 4, md: 6, lg: 8, xl: 8 }}>
<Image <MotionImage
src='/images/new/info_title.webp' src='/images/new/info_title.webp'
w={{ base: '90vw', sm: '80vw', md: '45vw', lg: '35vw', xl: '22vw' }} w={{ base: '90vw', sm: '80vw', md: '45vw', lg: '35vw', xl: '22vw' }}
mt={'50px'} mt={'50px'}
initial={{ opacity: 0, y: -30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, ease: "easeOut" }}
/> />
<Flex <MotionFlex
gap={{ base: 1, sm: 2, md: 3, lg: 4, xl: 2 }} gap={{ base: 1, sm: 2, md: 3, lg: 4, xl: 2 }}
flexWrap="wrap" flexWrap="wrap"
justifyContent="center" justifyContent="center"
px={{ base: 4, sm: 4, md: 0, lg: 0, xl: 0 }} px={{ base: 4, sm: 4, md: 0, lg: 0, xl: 0 }}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
> >
{infoData.map((info) => ( {infoData.map((info, index) => (
<Box <Box
key={info.id} key={info.id}
w={{ base: '20vw', sm: '110px', md: '150px', lg: '150px', xl: '150px' }} w={{ base: '20vw', sm: '110px', md: '150px', lg: '150px', xl: '150px' }}
@@ -109,9 +123,9 @@ function Info() {
{info.title} {info.title}
</Box> </Box>
))} ))}
</Flex> </MotionFlex>
<Box <MotionBox
w={{ base: '83vw', sm: '460px', md: '500px', lg: '500px', xl: '500px' }} w={{ base: '83vw', sm: '460px', md: '500px', lg: '500px', xl: '500px' }}
bg="white" bg="white"
justifyItems={'center'} justifyItems={'center'}
@@ -119,7 +133,10 @@ function Info() {
borderRadius="20px" borderRadius="20px"
mb={{ base: 8, sm: 8, md: 12, lg: 16, xl: 16 }} mb={{ base: 8, sm: 8, md: 12, lg: 16, xl: 16 }}
boxShadow="0 4px 20px rgba(0,0,0,0.15)" boxShadow="0 4px 20px rgba(0,0,0,0.15)"
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true, amount: 0.3 }}
transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
> >
<Image <Image
src={infoData.find(info => info.id === selectedInfo)?.image} src={infoData.find(info => info.id === selectedInfo)?.image}
@@ -140,7 +157,7 @@ function Info() {
{renderDescription(infoData.find(info => info.id === selectedInfo)?.description || '')} {renderDescription(infoData.find(info => info.id === selectedInfo)?.description || '')}
</Text> </Text>
</Box> </Box>
</Box> </MotionBox>
</Stack> </Stack>
</Box > </Box >
) )