How to make an animation in javascript/react js?

Question

I am trying to change the opacity of an element after every 100 milliseconds after a click event. But it is not working. The function change is called after a click event. Here is my code:

function change (i) {
  var o:number = 0;
  setTimeout( function() {
    o = o + 0.1;
    document.querySelector("div.label").style.opacity = o;
    console.log("o = " + o);
  }, 100)
}

When I console log, the value of o is always 0.1. What is wrong with this code?

It looks like you're using typescript, should that tag be added? Also, do not use document.querySelector("div.label") with react. Prefer the use of ref and useEffect (or maybe useLayoutEffect) — evolutionxbox
– evolutionxbox, Commented Nov 2, 2021 at 11:33
You are initializing the o variable inside the change function. Everytime you call it, o goes back to 0 and 0.1 after the timeout. And directly accessing the DOM isn't the way to go with React. — kgiannakakis
– kgiannakakis, Commented Nov 2, 2021 at 11:36
This question really needs some context of the surrounding React component. The code included heavily leads answerers towards solutions that wouldn't work well in the (not obvious) React setting. — DBS
– DBS, Commented Nov 2, 2021 at 11:47

Francesco Clementi · Accepted Answer · 2021-11-02 11:42:07Z

1

You need to update the var o with the current opacity before increasing it:

function change (i) {
  var o:number = 0;
  setTimeout( function() {
    o = document.querySelector("div.label").style.opacity; // <-- ADD THIS
    o = o + 0.1;
    document.querySelector("div.label").style.opacity = o;
    console.log("o = " + o);
  }, 100)
}

answered Nov 2, 2021 at 11:42

Francesco Clementi

2,1204 gold badges16 silver badges33 bronze badges

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

2 Comments

evolutionxbox Over a year ago

What if the component re-renders? It will start all over again

Francesco Clementi Over a year ago

In that case the var o need to be initialized outside the component and there is no need to set it equal to the current opacity

Dodoboulistick · Accepted Answer · 2021-11-02 11:42:05Z

0

You're using setTimeout(), but I think you're looking for setInterval() method (if you want something to repeat itself).

Try :

function change (i) {
  var o:number = 0;
  setInterval( function() {
    o = o + 0.1;
    document.querySelector("div.label").style.opacity = o;
    console.log("o = " + o);
  }, 100)
}

BE CAREFUL : you have to prevent your variable o to go beyond 1 (maximum opacity). You can use clearInterval().

answered Nov 2, 2021 at 11:42

Dodoboulistick

386 bronze badges

3 Comments

evolutionxbox Over a year ago

What did you change here?

Dodoboulistick Over a year ago

I used the setInterval() method instead of setTimeout()

Boidurja Talukdar Over a year ago

Somehow I managed to do it. I also changed opacity = o to opacity = o.toString().

Collectives™ on Stack Overflow

How to make an animation in javascript/react js?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related