I have a fairly simple fade-in scenario, where I want to control the duration of the animation. But cannot wrap around my head around how to accomplish this.
Code excerpt:
function BoxA() {
return (
<Spring from={{ opacity: 0.2 }} to={{ opacity: 1 }}>
{props => (
<div
style={{
height: 100,
width: 100,
backgroundColor: "pink",
color: "#fff",
...props
}}
>
1
</div>
)}
</Spring>
);
}
Complete code example: https://codesandbox.io/s/n7pw660264
You have to set the config property for the duration.
<Spring config={{duration: 5000}} from={{ opacity: 0.2 }} to={{ opacity: 1 }}>
You can use delay property to control the animation,
According to documentation
Delay in ms before the animation starts (config.delay takes precedence
if present) */
like this
<Spring from={{ opacity: 0.2 }} delay={1000} to={{ opacity: 1 }}></Spring>
Demo
Source
Related
I've been using an outdated version of react-spring to animate a programmatic scroll.
The code used to be:
import { Spring } from "react-spring/renderprops";
// (...)
<Spring from={{ top: 0 }} to={{ top: LINE_HEIGHT * (page.from - 1) }}>
{(props) => (
<List
width={1}
height={LINE_HEIGHT * limit}
rowCount={sortedGauges.length}
rowHeight={LINE_HEIGHT}
rowRenderer={rowRenderer}
containerStyle={{
width: "100%",
maxWidth: "100%",
}}
style={{
width: "100%",
overflow: "hidden",
}}
scrollTop={props.top}
/>
)}
</Spring>
So the Spring component was updating a child with props.top each time the user clicked a button to get a smooth scroll. But I can't reproduce this result with the new useSpring API. What is the correct syntax?
I want to use framer-motion to create a transition where element 2 slides in from the bottom as element 1 slides out to the top when I click next.
I'm using AnimatePresence component to achieve this, but the result is a strangely choppy transition where Element 2 appears in the final position briefly before it starts animating from the bottom.
Code:
<AnimatePresence exitBeforeEnter>
{
active === 0 ? (
<motion.div
key='id_1'
initial={{ opacity: 0 }}
animate={{ opacity: 1, backgroundColor: 'green' }}
exit={{ y: '-100%' }}
transition={{ duration: 2 }}>
Element 1
</motion.div>
)
: (
<motion.div
key='id_2'
initial={{ y: '100%' }}
animate={{ y: 0 }}
transition={{ duration: 2 }}
style={{
backgroundColor: 'purple'
}}>
Element 2
</motion.div>
)
}
</AnimatePresence>
Why does the second element appear briefly at first completely ignoring the initial state?
Here is the website link and as you can see, the intro animations look too laggy. Here is the code:
<motion.div className='pic' initial={{x:window.innerWidth < 996?'0%':'100%'}} animate={{x:'0%'}} transition={{delay:'1.6', type:'spring'}}><img src={blob} alt='hero section image'></img></motion.div>
Even the animations after the hero section don't look nice. I have used the react-intersection-observer to activate the animation on scrolling in this particular code.
<motion.div className='detailed' ref={refdetail} initial={{x:'100%', opacity:'0%'}} animate={{x: inViewdetail? '0%': '100%', opacity:inViewdetail? '100%': '0%'}} transition={{ delay:'1.5'}}>
Recently I have worked with framer.motion and it worked well out in my side.
I think that problem is related to the delay sub-prop you used in transition prop.
Here is my tested codebase with motion.framer which works fine in my side.
<motion.div
key={"setuplayout_motion"}
exit={{ opacity: 0 }}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
>
<SetupLayout setCurrentStep={setCurrentStep} />
</motion.div>
<motion.div
animate={{
x: authType === "sign-in" ? "10px" : "70px",
}}
transition={{
x: { type: "spring", stiffness: 100 },
duration: 0.8,
delay: 0.2,
}}
/>
I'm new to React Spring and I initially tried this
const strikeProps = useSpring({
textDecoration: "line-through",
from: { textDecoration: "none" },
});
But it's not working. I think there should be a way simulate the CSS solution for this.
The problem here is, that the original CSS solution is uses pseudo element for emulating the strike trough. We can only add react-spring properties for normal html elements. So the most compact way is to create a separate strike through component for this problem. For example:
const StrikeTroughtText = ({ children, weight = 1 }) => {
const props = useSpring({
from: { width: "0%" },
to: { width: "100%" }
});
return (
<div style={{ position: "relative", display: "inline-block" }}>
{children}
<animated.div
style={{
position: "absolute",
top: "50%",
left: 0,
width: props.width,
height: `${weight}px`,
background: "black"
}}
/>
</div>
);
};
We basically animate the width of the absolutely positioned div containing a black line over the text.
You can use it like a div component:
<StrikeTroughtText>text</StrikeTroughtText>
For bigger font size the default 1 px line weight is not enough, so I added a weight property also.
Here is my example: https://codesandbox.io/s/react-strike-trought-text-component-with-react-spring-animation-86cfd?file=/src/App.js
I have a simple react site which displays drinks from the drinks-api. It basically works like this: when user presses button, the query gets updated, fetchItems runs and items are displayed this way
<Spring from={{ opacity: 0, marginTop: 100 }} to={{ opacity: 1, marginTop: 0 }} config={{ delay: 400 }}>
{(props) => (
<div style={props}>
{drinks
? drinks.map((drink) => (
<DrinkCard
title={drink.strDrink}
image={drink.strDrinkThumb}
alcohol={drink.strAlcoholic}
category={drink.strCategory}
/>
))
: () => (
<div className="col-6 col-md-4 p-0">
<h1>NO RESULTS</h1>
</div>
)}
</div>
)}
</Spring>
For now this animation works only once when page loads. How do I force it to run on every search?
You should add reset to your Spring component like this:
<Spring
from={{ opacity: 0, marginTop: 100 }}
to={{ opacity: 1, marginTop: 0 }}
config={{ delay: 400 }}
reset
>
Here is an example: https://codesandbox.io/s/dank-moon-sq7v9?file=/src/App.js:348-503