AnimateKeyframes does not fit within 50px X 50px

[gunnarsireus]

Hello Bill. I would like to use the <AnimateKeyFrames ...> component with a svg image. However, the maximum size is 50px X 50px and it seems to be impossible to compress AnimateKeyFrame to fit inside that size. Thanks in advance, Gunnar Siréus

[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 . But that’s not possible, I cannot make <AnimateKeyFrames…> to fit inside 50px X 50px.

Best regards,

Gunnar Siréus

Tel: +46 708 940 567

Från: Bill notifications@github.com Skickat: den 29 mars 2019 07:00 Till: bluebill1049/react-simple-animate react-simple-animate@noreply.github.com Kopia: Gunnar Sireus gunnar.sireus@gmail.com; Author author@noreply.github.com Ä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 https://github.com/bluebill1049/react-simple-animate/issues/40#issuecomment-477878707 , 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: +46 708 940 567

Från: Bill notifications@github.com Skickat: den 29 mars 2019 07:58 Till: bluebill1049/react-simple-animate react-simple-animate@noreply.github.com Kopia: Gunnar Sireus gunnar.sireus@gmail.com; Author author@noreply.github.com Ä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 https://github.com/bluebill1049/react-simple-animate/issues/40#issuecomment-477890605 , 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 notifications@github.com Skickat: den 29 mars 2019 23:11 Till: bluebill1049/react-simple-animate react-simple-animate@noreply.github.com Kopia: Gunnar Sireus gunnar.sireus@gmail.com; Author author@noreply.github.com Ä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 https://github.com/bluebill1049/react-simple-animate/issues/40#issuecomment-478165006 , 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 notifications@github.com Skickat: den 29 mars 2019 23:11 Till: bluebill1049/react-simple-animate react-simple-animate@noreply.github.com Kopia: Gunnar Sireus gunnar.sireus@gmail.com; Author author@noreply.github.com Ä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 https://github.com/bluebill1049/react-simple-animate/issues/40#issuecomment-478165006 , 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: +46 708 940 567

Från: Bill notifications@github.com Skickat: den 1 april 2019 03:07 Till: bluebill1049/react-simple-animate react-simple-animate@noreply.github.com Kopia: Gunnar Sireus gunnar.sireus@gmail.com; Author author@noreply.github.com Ä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, https://github.com/bluebill1049/react-simple-animate/issues/40#issuecomment-478403969 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 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 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: +46 708 940 567

Från: Bill notifications@github.com Skickat: den 1 april 2019 13:02 Till: bluebill1049/react-simple-animate react-simple-animate@noreply.github.com Kopia: Gunnar Sireus gunnar.sireus@gmail.com; Author author@noreply.github.com Ä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 https://github.com/bluebill1049/react-simple-animate/issues/40#issuecomment-478534300 , 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: +46 708 940 567

Från: gunnarsireus@gmail.com gunnarsireus@gmail.com Skickat: den 1 april 2019 11:30 Till: 'bluebill1049/react-simple-animate' reply@reply.github.com; 'bluebill1049/react-simple-animate' react-simple-animate@noreply.github.com Kopia: 'Gunnar Sireus' gunnar.sireus@gmail.com; 'Author' author@noreply.github.com Ä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: +46 708 940 567

Från: Bill <notifications@github.com mailto:notifications@github.com > Skickat: den 1 april 2019 03:07 Till: bluebill1049/react-simple-animate <react-simple-animate@noreply.github.com mailto:react-simple-animate@noreply.github.com > Kopia: Gunnar Sireus <gunnar.sireus@gmail.com mailto:gunnar.sireus@gmail.com >; Author <author@noreply.github.com mailto:author@noreply.github.com > Ä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, https://github.com/bluebill1049/react-simple-animate/issues/40#issuecomment-478403969 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 notifications@github.com Skickat: den 3 april 2019 08:43 Till: bluebill1049/react-simple-animate react-simple-animate@noreply.github.com Kopia: Gunnar Sireus gunnar.sireus@gmail.com; Author author@noreply.github.com Ä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 https://github.com/bluebill1049/react-simple-animate/issues/40#issuecomment-479360820 , 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 notifications@github.com Skickat: den 3 april 2019 11:46 Till: bluebill1049/react-simple-animate react-simple-animate@noreply.github.com Kopia: Gunnar Sireus gunnar.sireus@gmail.com; Author author@noreply.github.com Ä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 https://github.com/bluebill1049/react-simple-animate/issues/40#issuecomment-479418579 , 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: +46 708 940 567

Från: Bill notifications@github.com Skickat: den 3 april 2019 12:24 Till: bluebill1049/react-simple-animate react-simple-animate@noreply.github.com Kopia: Gunnar Sireus gunnar.sireus@gmail.com; Author author@noreply.github.com Ä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 https://github.com/bluebill1049/react-simple-animate/issues/40#issuecomment-479430716 , 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