incompatibility with styled-components #31

rubengijbels · 2017-10-17T09:00:21Z

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 · 2017-10-17T17:12:28Z

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

JikkuJose · 2017-10-24T09:44:46Z

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

AaronPorts · 2017-10-24T10:09:43Z

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 · 2017-10-24T10:25:21Z

Oh thats a sad solution!

AaronPorts · 2017-10-24T10:28:45Z

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

dmbaranov · 2017-10-24T10:33:11Z

@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 · 2017-10-24T11:19:50Z

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 · 2017-11-01T02:06:30Z

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 · 2018-04-11T00:35:36Z

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

alaingalvan self-assigned this Nov 1, 2017

Aug	SEP	Oct
	08
2019	2020	2021

hyperfuse / react-anime

incompatibility with styled-components #31

incompatibility with styled-components #31

rubengijbels commented Oct 17, 2017 •

edited

dmbaranov commented Oct 17, 2017

JikkuJose commented Oct 24, 2017

AaronPorts commented Oct 24, 2017 •

edited

JikkuJose commented Oct 24, 2017

AaronPorts commented Oct 24, 2017

dmbaranov commented Oct 24, 2017 •

edited

AaronPorts commented Oct 24, 2017

alaingalvan commented Nov 1, 2017

TENsaga commented Apr 11, 2018 •

edited

hyperfuse / react-anime

Join GitHub today

incompatibility with styled-components #31

incompatibility with styled-components #31

Comments

rubengijbels commented Oct 17, 2017 • edited

dmbaranov commented Oct 17, 2017

JikkuJose commented Oct 24, 2017

AaronPorts commented Oct 24, 2017 • edited

JikkuJose commented Oct 24, 2017

AaronPorts commented Oct 24, 2017

dmbaranov commented Oct 24, 2017 • edited

AaronPorts commented Oct 24, 2017

alaingalvan commented Nov 1, 2017

TENsaga commented Apr 11, 2018 • edited

rubengijbels commented Oct 17, 2017 •

edited

AaronPorts commented Oct 24, 2017 •

edited

dmbaranov commented Oct 24, 2017 •

edited

TENsaga commented Apr 11, 2018 •

edited