incompatibility with styled-components

[rubengijbels]

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>
		)
	}
}

[dmbaranov]

Same for me. Tried with the latest version of styled-components and react-anime.

[jikkujose]

Same for me! Doesn't work with SC! :(

[AaronPorts]

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>

[jikkujose]

Oh thats a sad solution!

[AaronPorts]

Yes. But at least it works. I hope this will be fixed soon.

[dmbaranov]

@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,
  ...
});

[AaronPorts]

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

[alaingalvan]

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.

[TENsaga]

did you get an example? https://codesandbox.io/s/rrrj957znp