move Animation between button on reactjs - css

Question

I am working on a project and I am new with animation and my objective is from a group of buttons when the user click on the button become active and a line will move from button to button.
I managed to make the button active and change color and etc, the only thing i still can`t make is that line to move from button to button.
This is my Reactjs code
class AnimateButtonArea extends Component {
constructor(props){
super(props)
this.state = { active: 0 };
}
setActive = (key) => {
this.setState({ active: key });
}
render() {
return (
<div className = "AnimateButtonArea">
{data.AnimateButton.map((animateButton, key) => {
return(
<div key = {key} className = { this.state.active === key ? "AnimateButton active" : "AnimateButton"} >
<Button type = {this.state.active === key ? "SofiaProBlackSmallActive" : "SofiaProBlackSmall"} onClick = {() => { this.setActive(key) }} text = {animateButton.button} />
<div className = "animatedLine" />
</div>
)
})}
</div>
)
}
}
export default AnimateButtonArea;
And this is my Sass code
.AnimateButtonArea
display: inline-block
.AnimateButton
display: inline-block
margin-right: 147px
.AnimateButton.active .animatedLine
position: relative
height: 8px
left: 24px
background: var(--yellow)
border-radius: 40px
text-align: center
animation: grow 0.4s ease-out
#keyframes grow
0%
width: 0%
100%
width: 100%
UPDATE
Now I can move the line but now i want to increase the line and then decrease and move it
Here's the updated Reactjs part
setActive = (key) => {
this.setState({ active: key })
var difference = key - this.state.active
leftActive += 300 * difference
style = { width: `calc(${leftActive}px + 120px)`}
setTimeout(()=> this.beActive(leftActive), 1000)
}
beActive = (leftActive) => {
style = { marginLeft: `calc(${leftActive}px)`, with: `120px`}
console.log(style);
}

Answer 1

To move between positions, the line should be an unique object outside of the mapped array. Then you can manipulate the positioning (with margin, transform or left) based on the key/(array.length-1) with inline styles.
Set css transition: all 1s ease; to animate.

Answer 2

I would pass the width to state (this.state.activeWidth) and include it in the line style object. {width:this.state.activeWidth}