Currently, I am working on setting the background of the <Paper /> component using Material-UI version 1.0.0-beta.25 to display a gradient of colors. The colors are dynamically added by clicking the Add button and selecting one from the color picker. Here is my current code:
https://i.sstatic.net/yGaWl.png
I aim to animate the background gradient of the component to achieve an effect similar to this example. By modifying the pen's code, removing unnecessary sections, and incorporating the use of styled-components, I came up with the following implementation:
import styled, { keyframes } from 'styled-components';
{/* rest of the code */}
render() {
const gradient = keyframes`
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
`;
const MyPaper = styled(Paper)`
&& {
background: ${ colors.length == 0 ? `linear-gradient(to right, ${ "#FFFFFF" }, ${ "#FFFFFF" })`
: `linear-gradient(to right, ${ colors.map((color, key) => color.name ) })` };
animation: ${gradient} 15s ease infinite;
}
`;
return (
<div>
<div className = { classes.root }>
{/* Selected Color */}
<div>
<MyPaper className = { classes.paperStyle } elevation = { 4 }></MyPaper>
</div>
<br /><br /><br />
{/* rest of the code */}
Unfortunately, my background gradient animation is not functioning as intended.
If there are any errors in my approach or alternative methods to achieve this animation effect, I would greatly appreciate any guidance. Thank you in advance for your assistance!