# Help with implementing an animated line component

**URL:** <https://discourse.threejs.org/t/help-with-implementing-an-animated-line-component/68836>\
**Category:** Questions\
**Tags:** animation\
**Created:** [August 1, 2024, 9:00am UTC](https://discourse.threejs.org/t/help-with-implementing-an-animated-line-component/68836 "2024-08-01T09:00:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Askkattor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/askkattor/32/49451_2.png) [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Post date:** [August 1, 2024, 9:00am UTC](https://discourse.threejs.org/t/help-with-implementing-an-animated-line-component/68836/1 "2024-08-01T09:00:15Z")

</div>

Hello guys, I will appreciate any ideas on how to implement the blue line component you can see on the image below.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/1/01bcd3590a7b89b37796e562b1f86b5e9799939c.jpeg)

The problem is with the arrows which are animated, and are moving from one point to the other to show the direction of the path. For now I have implemented only a blue line that uses `Line ` from react-three/drei, but its missing arrows and animation. I think it can be done with a custom shader, but my knowledge is shaders is basically zero. Thank you for your time!

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [August 1, 2024, 9:17am UTC](https://discourse.threejs.org/t/help-with-implementing-an-animated-line-component/68836/2 "2024-08-01T09:17:13Z")

</div>

So similar ? [AnimatedConveyorBelt](https://hofk.de/main/discourse.threejs/2021/AnimatedConveyorBelt/AnimatedConveyorBelt.html)

(from the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315) )

---

<div class="post-metadata">

**Author:** ![Askkattor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/askkattor/32/49451_2.png) [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Post date:** [August 1, 2024, 9:26am UTC](https://discourse.threejs.org/t/help-with-implementing-an-animated-line-component/68836/3 "2024-08-01T09:26:09Z")

</div>

Yes, great example, thanks

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 1, 2024, 9:49am UTC](https://discourse.threejs.org/t/help-with-implementing-an-animated-line-component/68836/4 "2024-08-01T09:49:37Z")

</div>

you could do this with a texture and now you animate the map.offset.x, like so [Cards with border radius - CodeSandbox](https://codesandbox.io/s/9s2wd9)

i don’t think three line2 (which is what drei/line uses) can have textures though, it would probably have to be meshline. here’s an example using meshline + texture [https://codesandbox.io/p/sandbox/lanyard-rope-physics-2vsq8k](https://codesandbox.io/p/sandbox/lanyard-rope-physics-2vsq8k)

if it doesn’t have to be an array you could use dash to at least indicate directions [https://codesandbox.io/p/sandbox/bezier-curves-nodes-3k4g6](https://codesandbox.io/p/sandbox/bezier-curves-nodes-3k4g6)?

---

<div class="post-metadata">

**Author:** ![Askkattor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/askkattor/32/49451_2.png) [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Post date:** [August 1, 2024, 9:59am UTC](https://discourse.threejs.org/t/help-with-implementing-an-animated-line-component/68836/5 "2024-08-01T09:59:43Z")

</div>

Amazing. Thank you very much!