diff --git a/demo/sticky-html-arrow.html b/demo/sticky-html-arrow.html
index 7bfe19b..2cd3ef0 100644
--- a/demo/sticky-html-arrow.html
+++ b/demo/sticky-html-arrow.html
@@ -31,6 +31,7 @@
   <body>
     <folk-shape id="box1" x="50" y="100" width="50" height="50"></folk-shape>
     <folk-shape id="box2" x="150" y="300" width="50" height="50"></folk-shape>
+    <folk-shape id="box3" x="200" y="200" width="50" height="50"></folk-shape>
     <folk-arrow source="#box1" target="#box2"></folk-arrow>
 
     <script type="module">
diff --git a/src/folk-arrow.ts b/src/folk-arrow.ts
index 9300a73..c22408a 100644
--- a/src/folk-arrow.ts
+++ b/src/folk-arrow.ts
@@ -61,9 +61,12 @@ export class FolkArrow extends FolkBaseConnection {
 
     if (sourceRect === null || targetRect === null) {
       this.style.clipPath = '';
+      this.style.display = 'none';
       return;
     }
 
+    this.style.display = 'block';
+
     const [sx, sy, cx, cy, ex, ey] = getBoxToBoxArrow(
       sourceRect.x,
       sourceRect.y,
diff --git a/src/folk-base-connection.ts b/src/folk-base-connection.ts
index 3618005..c1cedfb 100644
--- a/src/folk-base-connection.ts
+++ b/src/folk-base-connection.ts
@@ -26,8 +26,8 @@ export class FolkBaseConnection extends FolkElement {
     this.unobserveTarget();
   }
 
-  override update(changedProperties: PropertyValues<this>) {
-    super.update(changedProperties);
+  override willUpdate(changedProperties: PropertyValues<this>) {
+    super.willUpdate(changedProperties);
 
     if (changedProperties.has('source')) {
       this.observeSource();
diff --git a/src/folk-event-propagator.ts b/src/folk-event-propagator.ts
index 62ce5d1..fbbe504 100644
--- a/src/folk-event-propagator.ts
+++ b/src/folk-event-propagator.ts
@@ -160,9 +160,10 @@ to.${key} = ${value};`);
   }
 
   #evaluateExpression = (event?: Event) => {
-    console.log('eval');
     if (this.sourceElement === null || this.targetElement === null) return;
+
     this.stroke = 'black';
+
     if (!this.#function) return;
 
     try {
