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>}}
Related
I want to change the color of the background behind the label. I've tried changing it in the view component where we use tailwind. I have also tried to simply check if Victory-native have anything that could help me with that.
I managed to create this in my app
But I really want it to look like this
Hope anyone could help me with this or point me in the right direction:))
<View style={tw`bg-orange-100 rounded-2xl mb-3 mr-5 w-${size} h-45 p-[0px]`}>
<View style={tw`self-center`}>
<VictoryChart height={190} width={350}>
<VictoryAxis
style={{
axis: { stroke: 'transparent' },
ticks: { stroke: 'transparent' },
tickLabels: { fill: 'white' },
}}
/>
<VictoryGroup offset={20}>
<VictoryStack>
<VictoryBar
data={usage}
cornerRadius={{ top: 9}}
style={{ data: { fill: '#FF9B68' } }}
/>
<VictoryBar
data={estimate}
cornerRadius={{ top: 9}}
style={{ data: { fill: '#FFC9AD' } }}
/>
</VictoryStack>
</VictoryGroup>
</VictoryChart>
</View>
</View>
</>
When I vertically scroll the moving div, some of the content freezes. I'm wondering how I would fix this. It isn't consistent either, as clicking the start/stop button sometimes fixes the issue for a few seconds. Very confused.
import { useEffect, useRef, useState } from "https://cdn.skypack.dev/react"
import ReactDOM from "https://cdn.skypack.dev/react-dom"
const Graph = ({ references: { trackerRef, wholeRef } }) => {
return (
<div
ref={wholeRef}
style={{
overflow: 'scroll',
height: '400px',
backgroundColor: '#333',
cursor: 'default',
userSelect: 'none'
}}
>
<div style={{ position: 'relative' }}>
<div>
{(() => {
const items = []
for (let i = 1; i < 100; i++) {
items.push(
<div
key={i}
style={{
position: 'absolute',
left: i * 1000,
height: '100%',
display: 'flex',
}}
>
<div
style={{
width: '1px',
backgroundColor: '#888',
}}
></div>
<div style={{ color: '#ddd', marginLeft: 8, fontSize: 14 }}>
{i}s
</div>
</div>
)
}
return items
})()}
{(() => {
const items = []
for (let i = 1; i < 1000; i++) {
if ((i * 100) % 1000 === 0) continue
items.push(
<div
key={i}
style={{
position: 'absolute',
left: i * 100,
height: '100%',
display: 'flex',
}}
>
<div
style={{
width: '1px',
backgroundColor: '#555',
}}
></div>
<div style={{ color: '#aaa', marginLeft: 5, fontSize: 10 }}>
{i * 100}ms
</div>
</div>
)
}
return items
})()}
<div
ref={trackerRef}
style={{
position: 'absolute',
height: '100%',
display: 'flex',
width: '1px',
backgroundColor: 'lightgreen',
}}
></div>
</div>
<div>
<div style={{ height: '2000px', width: '20px' }}></div>
</div>
</div>
</div>
)
}
const App = () => {
const trackerRef = useRef(null)
const wholeRef = useRef(null)
const [paused, setPaused] = useState(false)
const animationFrames = useRef([]).current
const intervals = useRef([]).current
const time = useRef(0)
useEffect(() => {
// Increase time when unpaused
intervals.push(setInterval(() => !paused && (time.current += 1), 1))
}, [paused])
useEffect(() => {
const refreshTrackbar = () => {
if (trackerRef.current && wholeRef.current && !paused) {
trackerRef.current.style.left = time.current + 'px'
wholeRef.current.scrollLeft = time.current - 100
requestAnimationFrame(refreshTrackbar)
}
}
animationFrames.push(requestAnimationFrame(refreshTrackbar))
}, [paused])
return (
<>
<h1>Scrollbug</h1>
<button
onClick={() => {
if (paused) {
setPaused(false)
} else {
setPaused(true)
animationFrames.forEach(frame => cancelAnimationFrame(frame))
intervals.forEach(interval => clearInterval(interval))
}
}}
>
{paused ? 'Start' : 'Stop'}
</button>
<br />
<br />
<Graph references={{ trackerRef, wholeRef }} />
</>
)
}
ReactDOM.render(<App />, document.getElementById("root"))
Here is a codepen to test the issue yourself
https://codepen.io/springer268/pen/PomjVvw
EDIT: So I tried this codepen on my mac, and the bug does not happen, which leads me to believe this is a Chrome version/platform specific issue, and not a me issue.
I'm not really sure how to make it stop freezing, but if you added an overflow:scroll; to your #root with a bigger height than your side-way scrolling div, you could scroll over it without freezing.
Making the side-way scrolling div a specific height and overflow-y: hidden; could help as well.
Kind of a workaround, but it works.
I have the following code:
const [hover, setHover] = useState(false);
<Paper
onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)}
style={{
width: '100%',
height: 445,
boxShadow: '0px 2px 5px ' + Colors.third + '66',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
backgroundImage: hover ? `url(${preview})` : ''
}}
className={hover ? 'image-paper' : ''}
>
some test text
</Paper>
and the following css:
.image-paper {
filter: blur(6px);
-webkit-filter: blur(6px);
}
above is the result:
and above is the goal:
the unblured element element cannot be a child of the blured element,
here a possible exemple of two stacked element with only one blured (those 2 img can be any other tag with content):
.Overlay {
display: grid;
justify-content: center;
}
img {
grid-row: 1;
grid-column: 1;
object-fit: scale-down;
filter: blur(0);
}
.blur {
filter: blur(5px) hue-rotate(160deg);
}
<div class="Overlay">
<img src="https://pngimg.com/uploads/mars_planet/mars_planet_PNG7.png" width="640" height="480" class="blur" />
<img src="https://pngimg.com/uploads/avatar/avatar_PNG29.png" width="640 " height="480 " />
</div>
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 Card component from Material UI. It looks like this:
You can see both: Star and Plus icon have inherited opacity from the background image.
I want the Plus icon to have opacity 1. Is this possible? Here is code:
<Card
style={{
position: "relative",
}}
>
<IconButton
color="primary"
className={classes.star}
style={{
pointerEvents: itemEnabled ? "auto" : "none"
}}
>
{item.favorite ? <Star /> : <StarBorder />}
</IconButton>
<IconButton
color="primary"
className={classes.permission}
onClick={e => {
e.preventDefault();
e.stopPropagation();
console.log("test")
}}
>
<Add />
</IconButton>
<CardActionArea style={{
width: "100%",
pointerEvents: itemEnabled ? "auto" : "none"
}}>
<CardMedia
className={classes.media}
image={requiredImage}
style={{
opacity: itemEnabled ? 1 : 0.4,
}}
title={item.favorite ? item.link.name : item.name}
/>
</CardActionArea>
</Card>
here are some styles used in className if interested:
const styles = theme => ({
media: {
height: 140,
width: "100%"
},
star: {
position: "absolute",
right: 0,
color: "white",
zIndex: 555
},
permission: {
position: "absolute",
right: 0,
top: 30,
color: "white",
zIndex: 555
},
linksTitle: {
padding: 20
}
});