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

remove animation box

This commit is contained in:
philipcheung 2025-03-17 10:13:04 +08:00
parent 9d073e59cf
commit f32a2dd307
1 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/bestoil.tsx
View File

@ -4,7 +4,7 @@ import { motion, useInView } from 'framer-motion'
import { useRef } from 'react' import { useRef } from 'react'
// Create motion components from Chakra components // Create motion components from Chakra components
const MotionBox = motion(Box);
const MotionStack = motion(Stack); const MotionStack = motion(Stack);
@ -17,12 +17,12 @@ function Bestoil() {
// Create refs for elements we want to animate // Create refs for elements we want to animate
const cookRef = useRef(null);
const oilCubesRef = useRef(null); const oilCubesRef = useRef(null);
// Check if elements are in view // Check if elements are in view
const isCookInView = useInView(cookRef, { once: true });
const isOilCubesInView = useInView(oilCubesRef, { once: true }); const isOilCubesInView = useInView(oilCubesRef, { once: true });
const oilCube = [ const oilCube = [
@ -86,18 +86,11 @@ function Bestoil() {
w='100%' w='100%'
align={"center"} align={"center"}
> >
<MotionBox
ref={cookRef}
initial={{ opacity: 0, y: 50 }}
animate={isCookInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
transition={{ duration: 0.8 }}
justifyItems={"center"}
>
<Image src={cook} <Image src={cook}
w={{ base: "80%", sm: "80%", md: '600px' }} w={{ base: "80%", sm: "80%", md: '600px' }}
fit='contain' fit='contain'
/> />
</MotionBox>
<Text <Text
w={{ base: "90%", sm: "90%", md: '600px' }} w={{ base: "90%", sm: "90%", md: '600px' }}