AnimateKeyframes does not fit within 50px X 50px about react-simple-animate

[bluebill1049]

hey Gunnar,

can you share your code? looks like it's probably an svg view port issue?

cheers
bill

[gunnarsireus]

Hello. Here is mu component ReactSvgIcon.jsx importing ReactLogo.svg. However, I want to rewrite ReactSvgIcon.jsx and use <AnimateKeyframes>. But that’s not possible, I cannot make <AnimateKeyFrames…> to fit inside 50px X 50px. Best regards, Gunnar Siréus Tel: [phone] Från: Bill <[email protected]> Skickat: den 29 mars 2019 07:00 Till: bluebill1049/react-simple-animate <[email protected]> Kopia: Gunnar Sireus <[email protected]>; Author <[email protected]> Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40) hey Gunnar, can you share your code? looks like it's probably an svg view port issue? cheers bill — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaPvdwgWL2dJz-VxaxOz4Hvsb6Awyks5vbavXgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaA3yXo2pCFD9wXk1L-zF7LeNQEHYks5vbavXgaJpZM4cRqg7.gif> import React from 'react'; import reactLogo from "../../wwwroot/ReactLogo.svg"; export default class ReactIcon extends React.Component { constructor(props) { super(props); } render() { let elementSpin = '@-webkit-keyframes elementSpin {0% {-webkit-transform: rotate(0)} 100% {-webkit-transform: rotate(360deg)}}'; if (!this.props.serverSideRendering) { const isIE = /*@cc_on!@*/false || !!document.documentMode; if (isIE) return; let styleSheet = document.styleSheets[0]; styleSheet.insertRule(elementSpin, styleSheet.cssRules.length); } const appHeader = { backgroundColor: '#222', height: '50px', width: 'auto', color: 'red' }; const appLogo = { WebkitAnimationName: 'elementSpin', WebkitAnimationTimingFunction: 'linear', WebkitAnimationIterationCount: 'infinite', WebkitAnimationDuration: '20s', WebkitAnimationDelay: '0.01s', WebkitAnimationPlayState: 'running', WebkitAnimationFillMode: 'both', height: '50px', width: '50px', align: 'left' }; const left = { display: 'inline', textAlign: 'left' }; const middle = { display: 'inline', textAlign: 'center'}; const right = { display: 'inline', textAlign: 'right' }; return ( <div style={appHeader}> <div style={left}><img src={reactLogo} style={appLogo} alt="reactLogo" /></div><div style={middle}>{this.props.text}</div><div style={right}><img src={this.props.icon} align='top' alt={this.props.iconClass} className={this.props.iconClass} /></div> </div>); } }

[bluebill1049]

Please read the documentation https://react-simple-animate.now.sh/animate-keyframes

You can do code like below

<AnimateKeyframes
play
iterationCount="infinite"
direction="alternate"
durationSeconds={10}
playState="running"
keyframes={[
'transform: rotateX(0) rotateY(0) rotateZ(0)',
'transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)',
]}

[gunnarsireus]

Hello. I did exactly that. With my code it looks like this: Using <AnimateKeyframes it becomes: The updated component is attached. Best regards, Gunnar Siréus Tel: [phone] Från: Bill <[email protected]> Skickat: den 29 mars 2019 07:58 Till: bluebill1049/react-simple-animate <[email protected]> Kopia: Gunnar Sireus <[email protected]>; Author <[email protected]> Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40) Please read the documentation https://react-simple-animate.now.sh/animate-keyframes You can do code like below <AnimateKeyframes play iterationCount="infinite" direction="alternate" durationSeconds={10} playState="running" keyframes={[ 'transform: rotateX(0) rotateY(0) rotateZ(0)', 'transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)', ]} — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaNnXM2A4EGUgo2fA57TcaAk1uMDcks5vbbmCgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaGMB0JjkQ92nALsgSnPFW7lL3xppks5vbbmCgaJpZM4cRqg7.gif> import React from 'react'; import reactLogo from "../../wwwroot/ReactLogo.svg"; import { AnimateKeyframes } from "react-simple-animate"; export default class ReactIcon extends React.Component { constructor(props) { super(props); } render() { const appHeader = { backgroundColor: '#222', height: '50px', width: 'auto', color: 'red' }; const imageStyle = { height: '50px', width: '50px', align: 'left' }; const left = { display: 'inline', textAlign: 'left' }; const middle = { display: 'inline', textAlign: 'center'}; const right = { display: 'inline', textAlign: 'right' }; return ( <div style={appHeader}> <div style={left}> <AnimateKeyframes play iterationCount="infinite" direction="alternate" durationSeconds={10} playState="running" keyframes={[ 'transform: rotateX(0) rotateY(0) rotateZ(0)', 'transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)' ]} <img src={reactLogo} style={imageStyle} alt="reactLogo" /> </AnimateKeyframes> </div><div style={middle}>{this.props.text}</div><div style={right}><img src={this.props.icon} align='top' alt={this.props.iconClass} className={this.props.iconClass} /></div> </div>); } }

[bluebill1049]

any chance you can supply me with your svg? or is it just a react logo?

[bluebill1049]

it's a css problem, there is no width for your img. hence it fly off the screen. make sure you inspect the element and check the attribute on your element. if you could leave the repo with a star would be really nice to support the package. thanks ❤️

https://codesandbox.io/s/6wyp4knkj3

[gunnarsireus]

Thanks. Looks nice. However, When I run it in my code I get “unexpected token”: Asset Size Chunks Chunk Names main-server.js 218 KiB main-server [emitted] main-server ERROR in ./ClientApp/common/ReactSvgIcon.jsx Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:/Users/gunna/Documents/GitHub/SireusCore/SireusCore/ClientApp/common/ReactSvgIcon.jsx: Unexpected token (43:36) 41 | <img 42 | style={{ 43 | ...style, | ^ 44 | width: 50 45 | }} 46 | src="https://facebook.github.io/create-react-app/img/logo.svg" Från: Bill <[email protected]> Skickat: den 29 mars 2019 23:11 Till: bluebill1049/react-simple-animate <[email protected]> Kopia: Gunnar Sireus <[email protected]>; Author <[email protected]> Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40) https://codesandbox.io/s/6wyp4knkj3 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaObKpWekRacxQYFK6mPokL7nuTMcks5vbo-JgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaKcAz_u5UXFxwSyYtGg8NC_IXFMrks5vbo-JgaJpZM4cRqg7.gif>

[gunnarsireus]

Hello again. Now it works brilliantly. I had to update Babel to 7… . Thanks a lot, Gunnar Från: Bill <[email protected]> Skickat: den 29 mars 2019 23:11 Till: bluebill1049/react-simple-animate <[email protected]> Kopia: Gunnar Sireus <[email protected]>; Author <[email protected]> Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40) https://codesandbox.io/s/6wyp4knkj3 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaObKpWekRacxQYFK6mPokL7nuTMcks5vbo-JgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaKcAz_u5UXFxwSyYtGg8NC_IXFMrks5vbo-JgaJpZM4cRqg7.gif>

[bluebill1049]

you happy to close this issue?

[gunnarsireus]

Hello Bill. Yes please close the issue. I must say that react-simple-animate is really impressing. I have read some of your other posts and I will continue to read your posts. They are amazingly good. Best regards, Gunnar Siréus Tel: [phone] Från: Bill <[email protected]> Skickat: den 1 april 2019 03:07 Till: bluebill1049/react-simple-animate <[email protected]> Kopia: Gunnar Sireus <[email protected]>; Author <[email protected]> Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40) you happy to close this issue? — You are receiving this because you authored the thread. Reply to this email directly, <#40 (comment)> view it on GitHub, or <https://github.com/notifications/unsubscribe-auth/ADvzaJvclRX1icHId2HHfZxsrbzq0gbkks5vcVvRgaJpZM4cRqg7> mute the thread. <https://github.com/notifications/beacon/ADvzaFCDbZF2lVMiZZXM_xvUirg6v3zzks5vcVvRgaJpZM4cRqg7.gif>

[bluebill1049]

thank you very much Gunnar, leave a star if you find it useful 🙏

[gunnarsireus]

Hello Bill. I have three ReatcJS questions I hope you could help me with. 1. I would like to use <AnimateKeyFrames> for rotating an object. Today I’m using this code I found somewhere on internet: export default class Rotate extends React.Component { constructor(props) { super(props); this.state = { play: this.props.play }; } componentWillMount() { const elementRotate = '@-webkit-keyframes elementRotate {0% {-webkit-transform: rotate(0)} 100% {-webkit-transform: rotate(360deg)}}'; if (this.props.serverSideRendering) return; const isIE = /*@cc_on!@*/false || !!document.documentMode; if (isIE) return; let styleSheet = document.styleSheets[0]; styleSheet.insertRule(elementRotate, styleSheet.cssRules.length); } componentWillReceiveProps(newProps) { this.setState({ play: newProps.play }); } render() { const appLogo = { WebkitAnimationName: 'elementRotate', WebkitAnimationTimingFunction: 'linear', WebkitAnimationFillMode: 'both', WebkitAnimationIterationCount: this.props.count, WebkitAnimationDuration: this.props.duration, WebkitAnimationDelay: '0.01s', WebkitAnimationPlayState: `${this.state.play ? 'running' : 'paused'}`, visibility: `${this.state.play ? 'visible' : 'hidden'}` }; return <div style={appLogo}>{this.props.children}</div>; This works fine but I want to use <AnimateKeyFrames> instead. I tried to do: return (<div style={{ visibility: `${this.state.play ? 'visible': 'visible'}` }} > <AnimateKeyframes play={this.state.play} playState={'running'} easeType={'linear'} iterationCount={this.props.count} durationSeconds={this.props.duration} keyframes={[ 'transform: rotate(0)', 'transform: rotate(360deg)']} {this.props.children} </AnimateKeyframes> </div>); However, it’s not working. Can you help me? 2. Drag and Drop Do you know any good library for Drag and Drop in React? I have read about Dan Abramow and his react-dnd library. I downloaded it and spent several hours trying to build it without succeeding. I has 11 branches and 114 contributors, and it seems quit messy I think. There must be something better out there. Something that works. 3. Redux. I have been using Redux in some applications and I have noticed that there is a lot of discussions on internet about Redux. When I code, I try to do everything as simple as possible and I try to eliminate all unnecessary code. Redux is used because of the “one way data transfer in React”. In Redux, the store is used as “single source of truth”. I have some objections to this logic. Single Source of truth. Most web applications have a database where data is stored. The db is updated with CRUD operations and the UI shows more or less the content of the db. In this case the db is the single source of truth. When using Redux, the store contains more or less a copy of the db. When updating the db, the store has also to be updated. This means we must do 2 updates. In most professional web applications Redux is used. I feel that Redux is used just because it’s expected by a professional programmer to use Redux. No professional programmer will take the risk of being accused of developing unprofessional software. Another fact is that programmers like intellectual challenges, and Redux is a kind of intellectual challenge. There is a huge eco system with Redux code, for example Redux Forms, that can be used in a Redux application, which is good. However, I think that Redux is a kind of “necessary evil”. My objection is that I don’t think Redux is necessary. Do you have any example of any React application where it’s really necessary to use Redux? Thanks in advance, Gunnar Siréus Tel: [phone] Från: Bill <[email protected]> Skickat: den 1 april 2019 13:02 Till: bluebill1049/react-simple-animate <[email protected]> Kopia: Gunnar Sireus <[email protected]>; Author <[email protected]> Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40) thank you very much Gunnar, leave a star if you find it useful 🙏 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaDyL37abBuG0Cjxj0Us2WAjhxFRUks5vcecugaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaAxqFV4V5-_EnouCFcSxAHNzJWOPks5vcecugaJpZM4cRqg7.gif>

[gunnarsireus]

Hello again Bill. It seems it is not possible to nest <AnimateKeyframes . Or? Maybe each <AnimateKeyframes should have a name so in case of nesting they don’t get mixed up. Best regards, Gunnar Siréus Tel: [phone] Från: [email protected] <[email protected]> Skickat: den 1 april 2019 11:30 Till: 'bluebill1049/react-simple-animate' <[email protected]>; 'bluebill1049/react-simple-animate' <[email protected]> Kopia: 'Gunnar Sireus' <[email protected]>; 'Author' <[email protected]> Ämne: SV: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40) Hello Bill. Yes please close the issue. I must say that react-simple-animate is really impressing. I have read some of your other posts and I will continue to read your posts. They are amazingly good. Best regards, Gunnar Siréus Tel: [phone] Från: Bill <[email protected] <mailto:[email protected]> > Skickat: den 1 april 2019 03:07 Till: bluebill1049/react-simple-animate <[email protected] <mailto:[email protected]> > Kopia: Gunnar Sireus <[email protected] <mailto:[email protected]> >; Author <[email protected] <mailto:[email protected]> > Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40) you happy to close this issue? — You are receiving this because you authored the thread. Reply to this email directly, <#40 (comment)> view it on GitHub, or <https://github.com/notifications/unsubscribe-auth/ADvzaJvclRX1icHId2HHfZxsrbzq0gbkks5vcVvRgaJpZM4cRqg7> mute the thread. <https://github.com/notifications/beacon/ADvzaFCDbZF2lVMiZZXM_xvUirg6v3zzks5vcVvRgaJpZM4cRqg7.gif>

[bluebill1049]

Why u couldn’t nest? Can u share the code?

[gunnarsireus]

Hello. Here’s my Rotate component: import React from 'react'; import { AnimateKeyframes } from "react-simple-animate"; export default class Rotate extends React.Component { constructor(props) { super(props); this.state = { play: this.props.play }; } componentWillReceiveProps(newProps) { this.setState({ play: newProps.play }); } render() { return (<div style={{ visibility: `${this.state.play ? 'visible' : 'visible'}` }} > <AnimateKeyframes name={'xxx'} play={this.state.play} playState={'running'} easeType={'linear'} iterationCount={this.props.count} durationSeconds={this.props.duration} keyframes={[ 'transform: rotate(0)', 'transform: rotate(360deg)']} {this.props.children} </AnimateKeyframes> </div>); } } And it’s just like this: <div className="col-md-12" id="divSwirl"> <Rotate count={10} duration={"0.2s"} play={this.state.play}> <AnimateKeyframes name={'yyy'} play={this.state.play} iterationCount="1" direction="alternate" durationSeconds={2} playState="running" keyframes={[ 'transform: scaleX(0.05) scaleY(0.05) scaleZ(0.05)', 'transform: scaleX(0.1) scaleY(0.1) scaleZ(0.1)', 'transform: scaleX(0.15) scaleY(0.15) scaleZ(0.15)', 'transform: scaleX(0.2) scaleY(0.2) scaleZ(0.2)', 'transform: scaleX(0.25) scaleY(0.25) scaleZ(0.25)', 'transform: scaleX(0.3) scaleY(0.3) scaleZ(0.3)', 'transform: scaleX(0.35) scaleY(0.35) scaleZ(0.35)', 'transform: scaleX(0.4) scaleY(0.4) scaleZ(0.4)', 'transform: scaleX(0.45) scaleY(0.45) scaleZ(0.45)', 'transform: scaleX(0.5) scaleY(0.5) scaleZ(0.5)', 'transform: scaleX(0.55) scaleY(0.55) scaleZ(0.55)', 'transform: scaleX(0.6) scaleY(0.6) scaleZ(0.7)', 'transform: scaleX(0.65) scaleY(0.65) scaleZ(1)', 'transform: scaleX(0.7) scaleY(0.7) scaleZ(0.7)', 'transform: scaleX(0.75) scaleY(0.75) scaleZ(0.65)', 'transform: scaleX(0.8) scaleY(0.8) scaleZ(0.7)', 'transform: scaleX(0.85) scaleY(0.85) scaleZ(0.8)', 'transform: scaleX(0.9) scaleY(0.9) scaleZ(0.9)', 'transform: scaleX(1) scaleY(1) scaleZ(1)' ]} <PhotoFrame> <a href={'/#/details/0/0/-?' + this.state.rand}> <img onLoad={() => { this.setState({ play: true }); }} src={'/Handler/Index/PhotoID=0/Size=M?' + this.state.rand} alt="" style={{ border: "4px solid white", maxHeight: "100%", maxWidth: "100%", verticalAlign: "middle" }} /> </a> </PhotoFrame> </AnimateKeyframes> </Rotate> </div> Thanks for your help, Gunnar Från: Bill <[email protected]> Skickat: den 3 april 2019 08:43 Till: bluebill1049/react-simple-animate <[email protected]> Kopia: Gunnar Sireus <[email protected]>; Author <[email protected]> Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40) Why u couldn’t nest? Can u share the code? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaJFa4XRoiCbFwJtOd-DOKMhqaI12ks5vdE14gaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaPjFoNccvBhdU60Tw-IOyl2JWtttks5vdE14gaJpZM4cRqg7.gif>

[bluebill1049]

do you have an error by nest them? in theory it should worked

[gunnarsireus]

No error simply no rotation Från: Bill <[email protected]> Skickat: den 3 april 2019 11:46 Till: bluebill1049/react-simple-animate <[email protected]> Kopia: Gunnar Sireus <[email protected]>; Author <[email protected]> Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40) do you have an error by nest them? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaDWt-PghYuAGB79mazpCac7nfzMyks5vdHhfgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaCQ9RWYd0WihKLj34OgaUPDVLuE-ks5vdHhfgaJpZM4cRqg7.gif>

[bluebill1049]

I see the problem please refer to my code below

https://codesandbox.io/s/6wyp4knkj3

you can only have one animation attribute on one element, this is standard css animation.

img {
  animation: "2s linear 0s infinite alternate none running RSI-m25o8kbye";
  animation: "2s linear 0s infinite alternate none running RSI-m25o8kby2";
}

see above if you have two the second one will overwrite. so solution is in my code example as well, take a look and play around with it.

thanks
bill

[gunnarsireus]

Thanks. That works well. Can you recommend any good ReactJS Drag & Drop library? And what do you think about Redux? Best regards, Gunnar Siréus Tel: [phone] Från: Bill <[email protected]> Skickat: den 3 april 2019 12:24 Till: bluebill1049/react-simple-animate <[email protected]> Kopia: Gunnar Sireus <[email protected]>; Author <[email protected]> Ämne: Re: [bluebill1049/react-simple-animate] AnimateKeyframes does not fit within 50px X 50px (#40) I see the problem please refer to my code below https://codesandbox.io/s/6wyp4knkj3 you can only have one animation attribute on one element, this is standard css animation. img { animation: "2s linear 0s infinite alternate none running RSI-m25o8kbye"; animation: "2s linear 0s infinite alternate none running RSI-m25o8kby2"; } see above if you have two the second one will overwrite. so solution is in my code example as well, take a look and play around with it. thanks bill — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#40 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/ADvzaP_3MGUu1SGaWr3m_cIi86UVNGjuks5vdIEjgaJpZM4cRqg7> . <https://github.com/notifications/beacon/ADvzaBA4vq1ZTXP2CJxNgdExwLxyOs5Rks5vdIEjgaJpZM4cRqg7.gif>

[bluebill1049]

not sure about drag and drop, but yea redux is good