39 lines
860 B
JavaScript
39 lines
860 B
JavaScript
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useEffect, useRef, useMemo } from 'react';
|
|
|
|
function EnterVideo(props) {
|
|
const show = props.opacity || 0;
|
|
const vd = useRef(null);
|
|
|
|
useEffect(() => {
|
|
vd.current.addEventListener('ended', props.onVideoEnd);
|
|
}, []);
|
|
|
|
return (
|
|
<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>
|
|
);
|
|
}
|
|
|
|
export default EnterVideo;
|