I've been stuck trying to get some divs to simply fade in when they become visible on the screen. Maybe I'm missing something, but here's the code.
I'm using the modules React-Spring V9 and React-Visibility-Sensor.
Parent Component's Render:
{
ArrayOfText.map(text => (
<VisibilitySensor key={text}>
{({ isVisible }) => (
<MyItem isVisible={isVisible} text={text} />
)}
</VisibilitySensor>
))
}
Child Component:
export default function MyItem({ text, isVisible }) {
const animatedStyle = useSpring({
config: { ...config.gentle },
to: {
opacity: isVisible ? 1 : 0
}
});
return (
<animated.div style={animatedStyle} className='large-header-text'>
{text}
</animated.div>
);
}
This works in that divs will appear on screen with a slight delay after they come into view. The problem I'm having is there's no animation. It's just opacity 0, then wait ~1 second, then instantly opacity: 1.
If anyone has run into this issue before please let me know how you solved it! Thank you.
I discovered the problem. I doubt this will help anyone else, but the reason it wasn't animating was because I was trying to have text fade in that had the following styles applied to it:
background: -webkit-linear-gradient(60deg, #1369BF, #B07D2E, #8FD714);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
This gives the text a gradient color, but I should have known this would prevent something like animating opacity.