Description
I'm trying to implement some parallax animation using react-spring, but I'm not able to find a way to space the containers in a responsive / uniform way.
Reproducible snippet
Here I made a snippet which contains a basic parallax effect animating some divs on scroll:
<Parallax pages={5}>
<ParallaxLayer offset={0} speed={0.4} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={0.9} speed={0.6} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={1.1} speed={0.8} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={1.9} speed={1} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={2} speed={1.2} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
</Parallax>
Problem
Having the layers with heights based on their content make them not responsive, as each layer is specifically starting from the specified offset position.
Conclusion
I would guess that works if the layers are being set with a specified viewport height, but is that really the only way?
Or am I perhaps misinterpreting the usage of this component?
Related
I have a couple of React Bootstrap Tabs within a TabContainer as shown below. My issue now is that when I set the maxHeight of the Tab.Content and it gets exceeded, the content is going under the Nav which is weird.
Here is my code:
<Tab.Container
activeKey={activeTab}
onSelect={(e) => {
setActiveTab(e);
}}
>
<Row sm={1} className={'px-3'}>
<Nav variant="tabs" className="border-bottom-0 flex-row">
{
// ...tabsGoHere
}
</Nav>
</Row>
<Divider />
<Tab.Content
className='p-4'
style={{
maxHeight: 600, //This is causing the Tab content to display under the Tabs instead of below it, once the height exceeds 600.
overflowY: 'scroll',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<Tab.Pane eventKey={activeTab}>
{/* ...Content */}
</Tab.Pane>
</Tab.Content>
</Tab.Container>
How can I ensure the Tab.Content is always displaying below the Tabs and not under them no matter the height of the Tab.Content
Thank you
When using mui Stack I get weird side effect of geting all the background shapes of Skeleton Avatar and background area smeared to oval|elipsoid shapes. I tried setting equal width and height for Avatar but id does not help.
How can I fix it throguh sx mui component property or css?
code fragment
<Box
noValidate autoComplete="off"
sx={{ marginLeft: '15%','& .MuiTextField-root': { m: 2, width: '25ch' }}}>
<div>
<form onSubmit={onSubmit} >
{formFields.map((form, index) => {
return (
<Fade in={true} sx = {{width: '95%'}} {...{ timeout: 500 }}>
<Stack direction="row" borderRadius="0" spacing={2} key={index} style ={{marginLeft: '-50px', }}>
{form.img? <Avatar alt="release img" src={form.img} sx={{ width: 56, height: 56 }} /> : <Skeleton animation={false} variant ='circular'> <Avatar sx={{ width: 56, height: 56}} /> </Skeleton>}
<TextField {/* ... */}/>
<IconButton onClick={() => removeFields(index)}><DeleteIcon /</IconButton>
</Stack>
</Fade>
)
})}
</form>
<IconButton onClick={addFields} color={'warning'}> <AddCircleOutlineOutlinedIcon /></IconButton>
<br></br><br></br>
<Button onClick={onSubmit} color={'warning'} variant="contained" endIcon= {<SendIcon/>} > Search links </Button>
Normally, the default value of align-items for flex items will be stretch, that's why you see your icon is stretched in the cross axis
The solution is simple, set alignItems prop in Stack to a different value rather than normal/stretch. Here I use center
<Stack
direction="row"
borderRadius="0"
spacing={2}
alignItems="center" // this line
style={{ marginLeft: "-50px" }}
>
Demo
References
CSS align-items
I have a table with a custom right side control, where the user can set the columns visibility as well as reorder them. Upon clicking a button, the control expands and the user can now make changes. The basic functionality is there. I am now trying to make the transition a smoother and that is where I am failing.
Here is the minimal markup that is rendered:
<div
style={{
display: "flex",
justifyContent: "flex-start"
}}
>
<div style={{ flex: "auto" }}>
<Table columns={columns} dataSource={data} pagination={"false"} />
</div>
<div
style={{
flex: hasExpandedControls ? "2 1 1" : "0 0 1",
transition: "all 500ms ease-in-out"
}}
>
<div
style={{
display: "flex"
}}
>
<div>
{hasExpandedControls ? (
<Tree
checkable
draggable
treeData={columnsTree}
checkedKeys={visibleColumns.map((col) => col.key)}
onCheck={handleCheck}
onDrop={handleDrop}
style={{ marginRight: "0.5em" }}
/>
) : null}
</div>
<div>
<div style={{ padding: "50% 0", height: 0, width: "40px" }}>
<Button
onClick={() => setHasExpandedControls((prev) => !prev)}
style={{
marginLeft: ".5em",
display: "block",
transformOrigin: "top left",
// transform: 'rotate(-90deg) translate(-100%)',
transform: "rotate(90deg) translate(0, -100%)",
marginTop: "-50%"
}}
>
Spalten
</Button>
</div>
</div>
</div>
</div>
Clicking the button triggers a state change, which causes the Tree to be rendered and in this instance the div 'snaps' to its full width. I am failing to accomplish my goal using css transitions, so I was wondering if there was an easier way to accomplish my goal.
I've tried setting the transition on various wrapping elements and all elements, but the 'snap' into existence remains.
Codepen to reproduce: https://codesandbox.io/s/basic-usage-antd-4-17-3-forked-yq2u7?file=/index.jshttps://codesandbox.io/s/gu4hs
I am new to react and I am trying to slide down my div element using react-spring. However, the slide-down effect is not working. I saw this in a tutorial and tried to implement it however it's not working.
Here is my code:
<Spring from={{ opacity: 0, marginTop: -500 }} to={{ opacity: 1, marginTop: 0 }}>
{props => (
<div style={props}>
<div style={{ display: cost ? 'block' : 'none' }}>
<Card className="calculation shadow">
<CardBody>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
<Row style={{ float: 'right', marginBottom: '1rem' }}>
<span style={{ float: 'right' }}>
<FontAwesomeIcon icon={faClipboardList} onClick={this.handler} />
</span>
</Row>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
</CardBody>
</Card>
</div>
</div>
)}
</Spring>
How do I make it work so that the div component slides down when clicking a button? Please help
You're not passing the animated styles to an animated.div. Which means the props from the spring will not animate your component.
Also since you're trigger the animation on a click. I would set the animated values – opacity & marginTop as state variables. Then you on the onClick handler you can update the state triggering a change in the animation.
See the Spring docs here
And for more information, here's a codesandbox
I found the solution everything is fine no animated div required I had to just change the version of react- spring to npm i react-spring#8.0.20 and it works
I am using React Spring for Parallax on a webpage however one of the components higher up on the page <Section2 /> uses flexbox to force 4 large horizontal icons to render as 2 x 2 icons on smaller screens.
When this happens it causes the offset value to be wrong for <Section3> in the mobile view. So the question I have is how do I change the offset value either by a media query or by other means.
Here is my code:
const Home = () => {
return (
<>
<Layout>
<SEO title="Home" />
<Parallax pages={4}>
<ParallaxLayer offset={0} speed={1} style={{ zIndex: '5' }}>
<Hero />
</ParallaxLayer>
<ParallaxLayer offset={0.7} speed={1.4} style={{ zIndex: '10' }}>
<HeroName />
</ParallaxLayer>
<ParallaxLayer
offset={0.8}
speed={0.7}
style={{ zIndex: '-1', backgroundColor: '#fcf7f0' }}
>
<Section1 />
</ParallaxLayer>
<ParallaxLayer offset={1} speed={0.8} style={{ zIndex: '3' }}>
<Section2 />
</ParallaxLayer>
<ParallaxLayer offset={1.2} speed={0.5} >
<Section3 />
</ParallaxLayer>
</Parallax>
</Layout>
</>
);
};
Many thanks
I solved this by using a ternary .
offset={window.innerWidth < 768 ? 2.1 : 1.2}