@@ -4,6 +4,7 @@ import EnterToFloorTwo from './videoComponents/EnterToFloor2'; | |||
import FloorOneToTwo from './videoComponents/Floor1To2'; | |||
import FloorTwoToOne from './videoComponents/Floor2To1'; | |||
import { useRef, useEffect, useReducer } from 'react'; | |||
import { AnimatePresence } from 'framer-motion'; | |||
const initOpacity = { | |||
enterVideo: 1, | |||
@@ -86,16 +87,17 @@ function VideoContainer(props) { | |||
} | |||
return ( | |||
<> | |||
<AnimatePresence> | |||
<EnterVideo | |||
key="enter" | |||
onVideoEnd={handleEnterVideoEnd} | |||
opacity={opacity.enterVideo} | |||
/> | |||
<EnterToFloorOne opacity={opacity.enterToFloorOne} /> | |||
<EnterToFloorTwo opacity={opacity.enterToFloorTwo} /> | |||
<FloorOneToTwo opacity={opacity.floorOneToTwo} /> | |||
<FloorTwoToOne opacity={opacity.floorTwoToOne} /> | |||
</> | |||
<EnterToFloorOne key="enter-to-1" opacity={opacity.enterToFloorOne} /> | |||
<EnterToFloorTwo key="enter-to-2" opacity={opacity.enterToFloorTwo} /> | |||
<FloorOneToTwo key="1-to-2" opacity={opacity.floorOneToTwo} /> | |||
<FloorTwoToOne key="2-to-1" opacity={opacity.floorTwoToOne} /> | |||
</AnimatePresence> | |||
); | |||
} | |||
@@ -1,44 +1,57 @@ | |||
import { motion } from 'framer-motion'; | |||
import { useRef, useEffect } from 'react'; | |||
import { motion, AnimatePresence } from 'framer-motion'; | |||
import { useRef, useEffect, useMemo } from 'react'; | |||
function EnterToFloorOne(props) { | |||
const vd = useRef(null); | |||
const opacity = props.opacity || 0; | |||
if (opacity == 1) { | |||
setTimeout(() => { | |||
vd.current.play(); | |||
}, 100); | |||
} | |||
const show = props.opacity || 0; | |||
useEffect(() => { | |||
vd.current.addEventListener('ended', () => { | |||
setTimeout(() => { | |||
vd.current.currentTime = 0; | |||
}, 1000); | |||
}); | |||
}, []); | |||
if (show) vd.current.play(); | |||
}, [show]); | |||
// const show = useMemo( | |||
// () => ({ | |||
// opacity: 1, | |||
// display: 'block', | |||
// duration: 0, | |||
// }), | |||
// [], | |||
// ); | |||
// const hide = useMemo( | |||
// () => ({ | |||
// opacity: 0, | |||
// transitionEnd: { | |||
// display: 'none', | |||
// }, | |||
// }), | |||
// [], | |||
// ); | |||
return ( | |||
<motion.div | |||
className="video-wrapper" | |||
style={{ | |||
position: 'fixed', | |||
top: 0, | |||
left: 0, | |||
width: '100%', | |||
height: '100%', | |||
zIndex: -1000, | |||
opacity: opacity, | |||
zIndex: -999, | |||
}} | |||
transition={{ type: 'tween', duration: 1 }} | |||
> | |||
<video ref={vd} muted width={'100%'}> | |||
<source src="/video/floor1.webm" type="video/mp4" /> | |||
</video> | |||
</motion.div> | |||
<AnimatePresence> | |||
{show && ( | |||
<motion.div | |||
className="video-wrapper" | |||
style={{ | |||
position: 'fixed', | |||
top: 0, | |||
left: 0, | |||
width: '100%', | |||
height: '100%', | |||
zIndex: -999, | |||
}} | |||
initial={{ opacity: 0 }} | |||
animate={{ opacity: 1 }} | |||
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }} | |||
> | |||
<video ref={vd} muted width={'100%'}> | |||
<source src="/video/floor1.webm" type="video/mp4" /> | |||
</video> | |||
</motion.div> | |||
)} | |||
</AnimatePresence> | |||
); | |||
+66; | |||
} | |||
export default EnterToFloorOne; |
@@ -1,8 +1,8 @@ | |||
import { motion } from 'framer-motion'; | |||
import { useEffect, useRef } from 'react'; | |||
import { motion, AnimatePresence } from 'framer-motion'; | |||
import { useEffect, useRef, useMemo } from 'react'; | |||
function EnterVideo(props) { | |||
const opacity = props.opacity || 0; | |||
const show = props.opacity || 0; | |||
const vd = useRef(null); | |||
useEffect(() => { | |||
@@ -10,24 +10,28 @@ function EnterVideo(props) { | |||
}, []); | |||
return ( | |||
<motion.div | |||
className="video-wrapper" | |||
style={{ | |||
position: 'fixed', | |||
top: 0, | |||
left: 0, | |||
width: '100%', | |||
height: '100%', | |||
zIndex: -1000, | |||
opacity: opacity, | |||
zIndex: -1000, | |||
}} | |||
transition={{ type: 'tween' }} | |||
> | |||
<video ref={vd} muted autoPlay={true} width={'100%'}> | |||
<source src="/video/enter.webm" type="video/mp4" /> | |||
</video> | |||
</motion.div> | |||
<AnimatePresence> | |||
{show && ( | |||
<motion.div | |||
className="video-wrapper" | |||
style={{ | |||
position: 'fixed', | |||
top: 0, | |||
left: 0, | |||
width: '100%', | |||
height: '100%', | |||
zIndex: -1000, | |||
}} | |||
initial={{ opacity: 0 }} | |||
animate={{ opacity: 1 }} | |||
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }} | |||
> | |||
<video ref={vd} muted autoPlay={true} width={'100%'}> | |||
<source src="/video/enter.webm" type="video/mp4" /> | |||
</video> | |||
</motion.div> | |||
)} | |||
</AnimatePresence> | |||
); | |||
} | |||
@@ -1,42 +1,37 @@ | |||
import { motion } from 'framer-motion'; | |||
import { useRef, useEffect } from 'react'; | |||
import { motion, AnimatePresence } from 'framer-motion'; | |||
import { useRef, useEffect, useMemo } from 'react'; | |||
function FloorOneToTwo(props) { | |||
const vd = useRef(null); | |||
const opacity = props.opacity || 0; | |||
if (opacity == 1) { | |||
setTimeout(() => { | |||
vd.current.play(); | |||
}, 100); | |||
} | |||
const show = props.opacity || 0; | |||
useEffect(() => { | |||
vd.current.addEventListener('ended', () => { | |||
setTimeout(() => { | |||
vd.current.currentTime = 0; | |||
}, 1000); | |||
}); | |||
}, []); | |||
if (show) vd.current.play(); | |||
}, [show]); | |||
return ( | |||
<motion.div | |||
className="video-wrapper" | |||
style={{ | |||
position: 'fixed', | |||
top: 0, | |||
left: 0, | |||
width: '100%', | |||
height: '100%', | |||
zIndex: -998, | |||
opacity, | |||
}} | |||
transition={{ type: 'tween', duration: 1 }} | |||
> | |||
<video ref={vd} muted width={'100%'}> | |||
<source src="/video/1to2.webm" type="video/mp4" /> | |||
</video> | |||
</motion.div> | |||
<AnimatePresence> | |||
{show && ( | |||
<motion.div | |||
className="video-wrapper" | |||
style={{ | |||
position: 'fixed', | |||
top: 0, | |||
left: 0, | |||
width: '100%', | |||
height: '100%', | |||
zIndex: -998, | |||
}} | |||
initial={{ opacity: 0 }} | |||
animate={{ opacity: 1 }} | |||
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }} | |||
> | |||
<video ref={vd} muted width={'100%'}> | |||
<source src="/video/1to2.webm" type="video/mp4" /> | |||
</video> | |||
</motion.div> | |||
)} | |||
</AnimatePresence> | |||
); | |||
} | |||
@@ -1,43 +1,37 @@ | |||
import { motion } from 'framer-motion'; | |||
import { useEffect, useRef } from 'react'; | |||
import { motion, AnimatePresence } from 'framer-motion'; | |||
import { useRef, useEffect, useMemo } from 'react'; | |||
function FloorTwoToOne(props) { | |||
const vd = useRef(null); | |||
const opacity = props.opacity || 0; | |||
if (opacity == 1) { | |||
setTimeout(() => { | |||
vd.current.play(); | |||
}, 100); | |||
} | |||
const show = props.opacity || 0; | |||
useEffect(() => { | |||
vd.current.addEventListener('ended', () => { | |||
setTimeout(() => { | |||
vd.current.currentTime = 0; | |||
}, 1000); | |||
}); | |||
}, []); | |||
if (show) vd.current.play(); | |||
}, [show]); | |||
return ( | |||
<motion.div | |||
className="video-wrapper" | |||
style={{ | |||
position: 'fixed', | |||
top: 0, | |||
left: 0, | |||
width: '100%', | |||
height: '100%', | |||
zIndex: -1000, | |||
opacity: opacity, | |||
zIndex: -998, | |||
}} | |||
transition={{ type: 'tween', duration: 1 }} | |||
> | |||
<video ref={vd} muted width={'100%'}> | |||
<source src="/video/2to1.webm" type="video/mp4" /> | |||
</video> | |||
</motion.div> | |||
<AnimatePresence> | |||
{show && ( | |||
<motion.div | |||
className="video-wrapper" | |||
style={{ | |||
position: 'fixed', | |||
top: 0, | |||
left: 0, | |||
width: '100%', | |||
height: '100%', | |||
zIndex: -998, | |||
}} | |||
initial={{ opacity: 0 }} | |||
animate={{ opacity: 1 }} | |||
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }} | |||
> | |||
<video ref={vd} muted width={'100%'}> | |||
<source src="/video/2to1.webm" type="video/mp4" /> | |||
</video> | |||
</motion.div> | |||
)} | |||
</AnimatePresence> | |||
); | |||
} | |||