Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

animateDrawing shows dashed line on first render

See original GitHub issue

Hey there! Cool package. Unfortunately I think I may have found a bug with the animateDrawing prop. I’m using v2.0.2

When animateDrawing is set to true, I’m seeing a dashed line appear on first render instead of seeing the arrow animate cleanly. Strangely, the arrow does animate properly if the component is removed and then added again to the DOM.

This dashed effect happens even if the dashness prop is set to false.

To Reproduce Here’s a code sandbox with a reproducible example. Refresh the preview and you should see a dashed line instead of the animation.

import "./styles.css";
import Xarrow, { Xwrapper } from "react-xarrows";

export default function App() {
  return (
      <div className="container">
              width: "50px",
              height: "50px",
              backgroundColor: "blue",
              alignSelf: "start"
            style={{ width: "50px", height: "50px", backgroundColor: "red" }}

Screenshots Here’s how the arrow appears on initial render: example-react-xarrows-bug

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:3
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

SimmonsRitchiecommented, Nov 29, 2022

Is there any workaround? Kindly respond!

@SimmonsRitchie @Eliav2

Sorry, I think I abandoned this package after I encountered this bug. It seemed like a cool package but that issue was a bit of a dealbreaker for me in my use case.

Eliav2commented, Oct 11, 2021

Great report, Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to smoothly animate drawing of a line - Stack Overflow
The trick is to render only one dash, and increment the length of the dash in the animation loop. // geometry var geometry...
Read more >
How to Create a Dashed Line in After Effects - YouTube
How to Create a Dashed Line in After Effects In this Sixty Second Tutorial we cover a method to create a simple dashed...
Read more >
Create animated line - MATLAB animatedline - MathWorks
This MATLAB function creates an animated line that has no data and adds it to the current axes.
Read more >
DrawSvg and AnimateCC - GSAP - GreenSock
The way SVG paths are rendered is based on how paths work in canvas. ... but you need to find a way to...
Read more >
Chart - Grommet
Whether to animate drawing. boolean ... The first array specifies the limits of the x-axis. ... Whether to use dashed lines for line...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found