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

oilInfo component added animation

Browse Source
This commit is contained in:
philipcheung
2025-11-02 15:34:48 +08:00
parent 63ba11891f
commit 6392ee020f
1 changed files with 39 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/new_ui/oilInfo.tsx
View File

@@ -1,52 +1,79 @@
import { Box, Stack, Image, Flex, Text, SimpleGrid } from '@chakra-ui/react'
import { Box, Image, SimpleGrid } from '@chakra-ui/react'
import { motion, useInView } from 'framer-motion'
import { useRef } from 'react'
const MotionImage = motion.create(Image)
const MotionBox = motion.create(Box)
const MotionSimpleGrid = motion.create(SimpleGrid)
function OilInfo() {
const mainRef = useRef(null);
const isMainInView = useInView(mainRef, { once: true });
return (
<Box
<MotionBox
ref={mainRef}
position="relative"
w="100%"
bgColor="#FFFBD3"
zIndex={3}
overflow="hidden"
justifyItems={'center'}
initial={{ opacity: 0 }}
animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.8, ease: "easeOut" }}
>
<SimpleGrid
<MotionSimpleGrid
columns={{ base: 1, sm: 1, md: 2 }}
p={{ base: 10, sm: 20, md: 20 }}
w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '60%' }}
h={'auto'}
gap={{ base: 10, md: 0 }}
justifyItems={'center'}
alignItems={'center'}
alignItems={'center'}
initial={{ opacity: 0, y: 50 }}
animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
>
<Box
<MotionBox
justifyItems={'center'}
alignItems={'center'}
initial={{ opacity: 0, x: -50 }}
animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
transition={{ duration: 0.6, delay: 0.4, ease: "easeOut" }}
>
<Image
<MotionImage
src='/images/cookmethods.webp'
alt='cooking methods'
w={{ base: '100%', sm: '90%', md: '85%' }}
initial={{ opacity: 0, scale: 0.8 }}
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
/>
</Box>
</MotionBox>
<Box
<MotionBox
justifyItems={'center'}
alignItems={'center'}
initial={{ opacity: 0, x: 50 }}
animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
transition={{ duration: 0.6, delay: 0.8, ease: "easeOut" }}
>
<Image
<MotionImage
src='/images/new/recipe_button.webp'
w={{ base: '100%', sm: '90%', md: '85%' }}
initial={{ opacity: 0, scale: 0.8 }}
animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
transition={{ duration: 0.5, delay: 1.0, ease: "easeOut" }}
/>
</Box>
</MotionBox>
</SimpleGrid >
</MotionSimpleGrid>
</Box >
</MotionBox>
)
}