plus1tv
incompatibility with styled-components
The following TypeScript code, that uses styled-components only animates the first 4 divs (those with a style object). The other four (styled components) do not animate. Animation using the animejs library in componentdidmount with a css selector on the styled components does work. But I would prefer to use your wrapper library.
import * as React from "react";
import styled from "styled-components";
import Anime from "react-anime"
const Box = styled.div`
width: 20px;
height: 20px;
background: red;
`
export default class Test extends React.Component
{
public render(): JSX.Element
{
const style = {
width: "20px",
height: "20px",
background: "green"
}
return (
<div>
<Anime delay={(e, i) => i * 100}
scale={[.1, .9]}>
<div style={style}/>
<div style={style}/>
<div style={style}/>
<div style={style}/>
<Box/>
<Box/>
<Box/>
<Box/>
</Anime>
</div>
)
}
}
Same for me. Tried with the latest version of styled-components and react-anime.
Doesn't work because <Box/> wraps <div> with <styled.div> element. So as a permanent solution we can wrap every styled component with another <div> element.
<div><Box/></div>
@AaronPorts but this way you don't have an access to the styled component's css, right? You can change its wrapper only (which is div in your example)
P.S. I deleted my previous answer due to I thought it's another repository. But my solution is to use original Anime.js and use it this way:
<Box innerRef={comp => (this.box = comp)} />
and then:
animate({
target: this.box,
...
});
Something like that.
<div>
<Anime
targets=".styleme>div"
translateX="250"
duration="2000"
easing="linear"
backgroundColor="rgb(66, 244, 92)"
color="#000"
direction="alternate"
loop="true">
<div className="styleme">
<Box>You are on the page</Box>
</div>
</Anime>
</div>
const Box = styled.div`
background: red;
font-family: Baskerville Old Face, serif;
font-size: 24px;
color: white;
`;
But of course I can't give any guarantees that nothing will break :D
Hmm, this is probably because anime.js mutates the style prop of the HTML element in the DOM. This might not be fixable. :(
If anything, send me a CodePen and I'll take a look.
