What should I do to place animated elements at different distances from the main card?
<motion.div
className={styles.homepage}
style={{ x, y, rotateX, rotateY, **z: 100** }}
drag
dragElastic={0.16}
dragConstraints={{ top: 0, left: 0, right: 0, bottom: 0 }}
whileTap={{ cursor: "grabbing" }}
>
<div className={styles.iconsContainer}>
<motion.img
style={{ x, y, rotateX, rotateY, **z: 1000** }}
className={`${styles.iconImg} ${styles.css}`}
src={process.env.PUBLIC_URL + "/img/homePage/css.svg"}
alt="css"
draggable="false"
/>
<motion.img
style={{ x, y, rotateX, rotateY, **z: 500** }}
className={`${styles.iconImg} ${styles.html}`}
src={process.env.PUBLIC_URL + "/img/homePage/html.svg"}
alt="css"
draggable="false"
/>
</div>
</motion.div>
I tried to use z with different px, like 500px and 1000px. But translateZ doesn't react at all.
Related
I'm facing issue where normal HTML img tag works just fine inside my Masonry List, but when I'm using Next.js Image Component with layout fill, it doesn't render anything.
My Styles:
const ImageList = styled('ul', {
columnCount: 3,
columnGap: 10,
display: 'block',
listStyleType: 'none',
overflowY: 'auto',
padding: 0,
margin: 0
})
const ImageListItem = styled('li', {
position: 'relative',
display: 'inline-block',
lineHeight: 0,
height: 'auto',
marginBottom: 10
})
HTML Skeleton:
<ImageList>
{detailImage.map((image, idx) => {
return (
<ImageListItem key={`_${idx}`}>
<Image
src={image.src}
alt={image.alt}
blurDataURL={image.blurDataURL}
placeholder={'blur'}
layout={'fill'}
objectFit={'cover'}
/>
{/* <img
src={image.src}
style={{
width: '100%',
height: '100%',
objectFit: 'cover'
}}
/> */}
</ImageListItem>
)
})}
</ImageList>
EDIT
Because I'm getting all images from CMS and have width/height I used the padding-top trick to create box and then I use next/image with object-fit: cover.
Code Example:
<ImageListItem key={`_${idx}`}>
<Box
css={{
display: 'inline-flex',
pt: `${100 / (image.width! / image.height!)}%`
}}
>
<Box css={{ position: 'absolute', inset: 0, m: 0 }} as={'figure'}>
<Image
src={image.src}
alt={image.alt}
blurDataURL={image.blurDataURL}
placeholder={'blur'}
layout={'fill'}
objectFit={'cover'}
/>
</Box>
</Box>
</ImageListItem>
When you use layout='fill' it's necesary a parent container for each image and this container needs to have position: relative;. Maybe it doesn't show anything because its parent elements don't have the width property.
This is the description in the documentation:
When fill, the image will stretch both width and height to the
dimensions of the parent element, provided the parent element is
relative. This is usually paired with the objectFit property. Ensure
the parent element has position: relative in their stylesheet.
im trying to make a full response window, which contains a rows. Above a video playing and at the bottom, some controls.
i applied the css recommended here for a full responsive keeping aspect ratio https://www.npmjs.com/package/react-player
This is the screen code:
<Flex color="white" direction="column">
<Flex justifyContent="center" flex="5">
<Box pos="relative" h="100%" w="100%">
<Player url="https://www.youtube.com/watch?v=ysz5S6PUM-U" />
</Box>
</Flex>
<Flex
justifyContent="space-around"
alignItems="center"
flex="1"
padding="2vmax"
>
<IconButton
aria-label="Search database"
icon={<GrVolume color="black" size="2vmax" />}
/>
<IconButton
aria-label="Search database"
icon={<GiExitDoor color="black" size="2vmax" />}
/>
</Flex>
</Flex>
and this is the Player component
const Player: FC<PlayerType> = ({ url }) => (
<div className="player-wrapper">
<ReactPlayer
url={url}
className="react-player"
playing
width="100%"
height="100%"
config={{
youtube: {
playerVars: {
rel: 0,
showinfo: 0,
modestbranding: 1,
fs: 0,
disablekb: 1,
host: "http://www.youtube.com",
},
},
}}
/>
</div>
);
this is the extra css applied:
.player-wrapper {
position: relative;
padding-top: 56.25%;
}
.react-player {
position: absolute;
top: 0;
left: 0;
}
I tried by wrapping everything with chakra aspect-ratio component, but this is the closest escenario for a responsive thing that i found, and its bad lol.
This is also affecting Flex somehow since flex=5 is not being applied i guess
on bigger screens it overflows. The idea is to keep everything whitin 100vh.
I'm trying to fix Chart's height value but with responsive container it move in dependency with customLegend. So result is when Legend has got few elements (low height value) LineChart become bigger and vice versa. Many elements in Legend => small LineChart height
<div
style={{
width: "100%",
paddingBottom: 30,
maxHeight: 1200
}}
>
<ResponsiveContainer width={"100%"} minHeight={650} >
<LineChart height={300}
data={DataSet}
margin={{ right: 30}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="sold" />
<YAxis />
<Tooltip wrapperStyle={{ fontSize: 12 }} />
<Point..../>
<Brush height={25} />
<Legend chartHeight={300}
content={renderLegend}
wrapperStyle={{ paddingTop: 20 }}
align={"left"}
/>
</LineChart>
</ResponsiveContainer>
</div>
So I tried to put fixed height everywhere as documented in API, but it didn't work. Without height param chart not displayed at all. What's wrong with my CSS?
v1.8.5
How to grey out the background application or screen while spinner is running in React.
Everything is working fine but screen is not grey out in code
{
loading ? <Spinner animation="border" variant="success" /> : (<Modal></Modal>)
}
my css part is
.spinner-border{
width: 6rem !important;
height: 6rem !important;
left: 880px;
position: absolute;
top: 33%
}
Enclose everything in a view and place the backgroundColor in rgba, if necessary, place the view with zindex -1
<View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.6)', alignItems: "center", justifyContent: "center" }}>
<Spinner animation="border" variant="success" />
</View>
You need to use opacity - you can't do it with a backgroundColor unless you position the whole View over your original View with position: absolute which will be difficult especially if your View is dynamic.
Just enclose everything in this and spinning will decide if you grey out or not:
React Native:
<View
pointerEvents={spinning > 0 ? 'none' : 'auto'}
style={{ flex: 1, opacity: spinning > 0 ? 0.25 : 1}}>
<...usual components />
</View>
pointerEvents will disable all touch events
React.js:
<div
style={{
opacity: spinning > 0 ? 0.25 : 1,
pointerEvents: spinning > 0 ? 'none' : 'auto'
}}>
<...usual components />
</div>
I am using react-motion for CSS transfrom in react. this bellow code scales my desired output from top left corner.
<Motion defaultStyle={{ x: 0 }} style={{ x: spring(360) }}>
{(value) => {
return (
<div
style={{
width: value.x,
height: value.x,
animation: `scale 5s infinite`,
transform: `scale(1,1)`,
}}
>
{" "}
<this.ComponentName post={post} view={view} />
</div>
);
}}
</Motion>
How can i make it scale from center?
I have come to a solution. It can be done with a few changes but a tricky one.
<Motion defaultStyle={{ x: 0 }} style={{ x: spring(1) }} >
{value => {return <div style={{
animation: `scale 5s infinite`,
transform: `scale(${value.x})`,
}}
> <this.ComponentName post={post} view={view}/></div>}}