How to dynamically change animation value in inline syle of ReactJS

Question

I found many related questions regarding inline style of ReactJS but non suitable to mine.

I need to change the animation speed(1,3,4,6,7 are my animation speeds) in UI as per the API values (which changes dynamically)

I tried the following way

<img className="fan1" src={fan1} style={{animation: "spin "`${2}`"s linear infinite" }}></img>    
<img className="fan1" src={fan1} style={{animation: "spin ${2}s linear infinite" }}></img>
<img className="fan1" src={fan1} style={{animation: `spin {2}s linear infinite` }}></img>
<img className="fan1" src={fan1} style={{animation: {spin {2}s linear infinite} }}></img>

I'm not sure how to acheive this. Please help me out.

Every single one of those is invalid or incorrect Javascript string syntax lol. Read this carefully and check examples: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… and revisit basic Javsacript string syntax — Jayce444
– Jayce444, Commented Sep 12, 2020 at 10:15

Ramlal S · Accepted Answer · 2020-09-12 10:21:51Z

1

This works for me

<img className="fan1" 
      src={fan1}
      style={{ animation: `spin ${5}s linear infinite` }}
      alt="fan"
  ></img>

answered Sep 12, 2020 at 10:21

Ramlal S

1,6531 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dharman · Accepted Answer · 2020-09-12 10:31:22Z

1

Your main problem is that the style strings are not valid JavaScript. May I suggest reading up on the syntax on template literals. If you change that I suspect it should then work. So your code should look something like this,

<img className="fan1" src={fan1} style={{animation: `spin ${2}s linear infinite` }}></img>    
<img className="fan1" src={fan1} style={{animation: `spin ${2}s linear infinite`  }}></img>
<img className="fan1" src={fan1} style={{animation: `spin ${2}s linear infinite`  }}></img>
<img className="fan1" src={fan1} style={{animation: `spin ${2}s linear infinite`  }}></img>

You loud then replace the ${2} with a link to the state that is constantly being updated.

edited Sep 12, 2020 at 10:31

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Sep 12, 2020 at 10:25

Luke Braithwaite

772 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to dynamically change animation value in inline syle of ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related