I am using mouse enter and mouse leave event for scaling up the cards. When I move the pointer backwards i.e from second card to first then flickering happens. It works fine when I move from first card to second. The card code is in ListItem.js and it is called in ListSlider. Here is the jsx and css code.
import React, { useState } from 'react';
import './style.css';
import videos from '../../assets/images/Vincenzo _ Official Trailer.mp4';
import { HStack, Stack, Text, Box, Tooltip } from '@chakra-ui/react';
import { AiOutlinePlusCircle } from 'react-icons/ai';
import { IoIosPlayCircle, IoIosThumbsUp } from 'react-icons/io';
import { BsDot } from 'react-icons/bs';
import Modal from './Modal';
const ListItems = ({ index }) => {
const [isHovered, setIsHovered] = useState(false);
const trailer = 'https://player.vimeo.com/external/371433846.sd.mp4?s=236da2f3c0fd273d2c6d9a064f3ae35579b2bbdf&profile_id=139&oauth2_token_id=57447761'
const imgUrl =
'https://occ-0-5346-58.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABfk0bgdUkyANVOxV_ICIDuU9Gqo8M7W3Cx7yjqQRHRx01BrKCzC8mnwHDLHybmbpCKsj34flH_1q3vFeRn-Fk2eHToauI-0SLebLo0r95rIM8LImtwIIDGSOXpB881ycQUvAfz4m4MVwryPITl5XN9jLRsBg6FgLfc92EeyFo_w76gxAsWJB7QmlgkuKh-c.jpg?r=c8b';
return (
<div
className="listItem"
style={{ left: index * 225 - 50 + index * 2.5 }}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<img src={imgUrl} />
{isHovered && (
<>
<Stack>
<Stack>
<video
src={'https://youtu.be/QILhvR4QPsQ'}
autoPlay={true}
loop
// muted={true}
// preLoad="auto"
/>
</Stack>
<Stack p={5} gap={2}>
<HStack justifyContent={'space-between'}>
<HStack>
<IoIosPlayCircle color="#e5e5e5" size={40} />
<Tooltip
label="Add to My List"
placement="top"
hasArrow
arrowSize={10}
bgColor={'#e5e5e5'}
color={'black'}
fontSize={'md'}
px={3}
py={1}
>
<Box>
<AiOutlinePlusCircle color="#e5e5e5" size={40} />
</Box>
</Tooltip>
<Box border={'2px solid #e5e5e5'} borderRadius={'full'} p={2}>
<IoIosThumbsUp />
</Box>
</HStack>
{/* Episodes Modal */}
<Modal/>
</HStack>
<HStack>
<Text color={'#46d369'} fontSize={'md'} fontWeight={'bold'}>
96% Match
</Text>
<Text border={'1px solid #ffffff66'} px={2} fontWeight={'bold'}>
16+
</Text>
<Text color={'#fff'} fontSize={'md'} fontWeight={'bold'}>
20 Episodes
</Text>
<Text
border={'1px solid #ffffff66'}
fontSize={'xs'}
fontWeight={'bold'}
px={1}
borderRadius={'md'}
>
HD
</Text>
</HStack>
<HStack spacing={0}>
<Text color={'#fff'} fontSize={'md'} fontWeight={'bold'}>
Dramedy
</Text>
<BsDot color="#777" size={25} />
<Text color={'#fff'} fontSize={'md'} fontWeight={'bold'}>
Corruption
</Text>
<BsDot color="#777" size={25} />
<Text color={'#fff'} fontSize={'md'} fontWeight={'bold'}>
Korean
</Text>
</HStack>
</Stack>
</Stack>
</>
)}
</div>
);
};
export default ListItems;import React, { useRef, useState } from 'react';
import { IoIosArrowBack, IoIosArrowForward } from 'react-icons/io';
import { Stack, Text } from '@chakra-ui/react';
import ListItem from './ListItems';
import './style.css';
const ListSlider = () => {
const [isMoved, setIsMoved] = useState(false);
const [slideNumber, setSlideNumber] = useState(0);
const listRef = useRef();
const handleClick = direction => {
setIsMoved(true);
let distance = listRef.current.getBoundingClientRect().x - 50;
if (direction === 'left' && slideNumber > 0) {
setSlideNumber(slideNumber - 1);
listRef.current.style.transform = `translateX(${230 + distance}px)`;
}
if (direction === 'right' && slideNumber < 5) {
setSlideNumber(slideNumber + 1);
listRef.current.style.transform = `translateX(${-230 + distance}px)`;
}
};
return (
<>
<Stack width={'100%'}>
<Text color={'#e5e5e5'} fontWeight={'700'} fontSize={'xl'} pl={'50px'}>
Trending Now
</Text>
<div className="wrapper">
<IoIosArrowBack
className="sliderArrow left"
onClick={() => handleClick('left')}
style={{ display: !isMoved && 'none' }}
/>
<div className="container" ref={listRef}>
<ListItem index={0} />
<ListItem index={1} />
<ListItem index={2} />
<ListItem index={3} />
<ListItem index={4} />
<ListItem index={5} />
<ListItem index={6} />
<ListItem index={7} />
<ListItem index={8} />
<ListItem index={9} />
</div>
<IoIosArrowForward
className="sliderArrow right"
onClick={() => handleClick('right')}
/>
</div>
</Stack>
</>
);
};
export default ListSlider;body{
overflow-x: hidden;
}
.wrapper {
position: relative;
}
.sliderArrow {
width: 50px;
height: 100%;
background-color: rgb(22, 22, 22, 0.5);
color: white;
position: absolute;
z-index: 99;
top: 0;
bottom: 0;
margin: auto;
cursor: pointer;
}
.left {
left: 0;
}
.right {
right: 0;
}
.container {
margin-left: 50px;
display: flex;
margin-top: 10px;
width: max-content;
transform: translateX(0px);
transition: all 1s ease;
}
.listItem {
width: 247px;
height: 139px;
background-color: #181818;
margin-right: 5px;
cursor: pointer;
color: white;
overflow: hidden;
transition: transform 0.3s linear;
}
.listItem img {
width: 100%;
height: 100%;
object-fit: cover;
}
.listItem video {
width: 100%;
height: 175px;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.listItem:hover {
transform: scale(1.1);
width: 320px;
height: 330px;
position: absolute;
top: -150px;
bottom: 0 !important;
;
-webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
border-radius: 5px;
}
.listItem:hover img {
height: 175px;
}
.modal-video{
width: 100%;
height: 445px;
object-fit: cover;
}
.video-content{
background: linear-gradient(0deg,#181818,transparent 50%);
}
.main-image .play-btn{
opacity: 0;
}
.main-image:hover .play-btn{
opacity: 1;
}
.listItem10 {
width: 121px;
height: 173px;
background-color: #181818;
margin-right: 5px;
cursor: pointer;
color: white;
overflow: hidden;
}
.listItem10 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.listItem10 video {
width: 100%;
height: 175px;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.listItem10:hover {
width: 350px;
height: 360px;
position: absolute;
top: -150px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
border-radius: 5px;
}
.listItem10:hover img {
height: 175px;
}