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