CODEWITHSUNDEEP
javascriptcssreactjssvgredux
trinvon
trinvon

Reputation: 55

Animating SVG lines on state change in React app

I have a react app where absolute position divs are connected with SVG lines, like so: enter image description here

The positions of the orange box components are stored in redux state, and the lines are drawn between the [x,y] positions of the corresponding boxes. The boxes can be dragged and the line will transform correspondingly.

An action can be called where the position of one (or more) of the orange boxes can suddenly change position, say from [330,500] to [250,300]. Since nothing new is rendered to the DOM, I can use a simple css transition: transform to animate the change in position of the box so it does not look like the box "jumps" from one position to another. However, because this css transition does not actively change the position of the boxes stored in the redux state, the lines will remain static until the transition is complete and the state is updated, and then will be redrawn between the new positions.

I am seeking a way to animate the SVG lines so they appear to be connected to the boxes throughout the box transition.

Upvotes: 1

Views: 1111

Answers (1)

trinvon
trinvon

Reputation: 55

If anyone runs into a similar problem, changing from a <line> element with x1, x2, y1, y2 defined to a <path> element where d={`M ${x1,y1} L ${x2,y2}`} and a css transition transition: all 0.5s on the path class fixed this. Seems like svg paths can have transitions, but svg lines cannot.

Upvotes: 1

Related Questions