# Self drawing lines

**URL:** <https://forums.fusetools.com/t/self-drawing-lines/4048>\
**Category:** How-to Discussions\
**Created:** [September 19, 2017, 6:07am UTC](https://forums.fusetools.com/t/self-drawing-lines/4048 "2017-09-19T06:07:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SvenWS](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/svenws/32/325_2.png) [@SvenWS](https://forums.fusetools.com/u/SvenWS)\
**Post date:** [September 19, 2017, 6:07am UTC](https://forums.fusetools.com/t/self-drawing-lines/4048/1 "2017-09-19T06:07:57Z")

</div>

I’m trying to create self drawing lines like this [polyline animation](https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim).  
Is this possible?  
I looked to the attract class in combination with the curve tag. But in this case

```
<Curve StrokeWidth="2.5" StrokeColor="#000">
    <Each Items="{items}">
        <CurvePoint X="attract({x},lineAnim)" Y="attract({y},lineAnim)"/>
    </Each>
</Curve>

```

the animations starts for every point at the same time.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [September 19, 2017, 9:27am UTC](https://forums.fusetools.com/t/self-drawing-lines/4048/2 "2017-09-19T09:27:43Z")

</div>

With the constraints you found in mind, the solution is pretty clear: you need to delay the adding of the points themselves.

One way would be to recursively add the points to the Observable list by using `setTimeout()` to specify the delay.

Another that should yield similar results: have the full list filled, then data-bind the [Limit](https://www.fusetools.com/docs/fuse/reactive/each/limit) property on `Each` tag to an Observable integer and change the value of it (again, recursively with a `setTimeout()`).

Hope this helps!

---

<div class="post-metadata">

**Author:** ![SvenWS](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/svenws/32/325_2.png) [@SvenWS](https://forums.fusetools.com/u/SvenWS)\
**Post date:** [September 19, 2017, 9:47am UTC](https://forums.fusetools.com/t/self-drawing-lines/4048/3 "2017-09-19T09:47:51Z")

</div>

@Uldis: Thx for your input. I hoped I oversaw some AttractorConfig stuff like using a attractor config with a timeline…

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [September 19, 2017, 9:48am UTC](https://forums.fusetools.com/t/self-drawing-lines/4048/4 "2017-09-19T09:48:59Z")

</div>

Nah, sorry. Adding a `Delay` to the attractor also was my first thought, but that currently isn’t possible.

---

<div class="post-metadata">

**Author:** ![SvenWS](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/svenws/32/325_2.png) [@SvenWS](https://forums.fusetools.com/u/SvenWS)\
**Post date:** [September 19, 2017, 9:54pm UTC](https://forums.fusetools.com/t/self-drawing-lines/4048/5 "2017-09-19T21:54:27Z")

</div>

I think that’s a good starting point:

```
<App Background="#232323">
    <JavaScript>
        var Observable = require( "FuseJS/Observable" )
        
        var items = Observable();
        exports.items = items;
        var currPoint = 1;

        var longInterval = 1100;
        var shortInterval = 500;
        var endInterval = 2000;
        var points = [[0.0, 0.0, shortInterval], [1.0, 0.0, longInterval], 
                      [1.0, 0.2, shortInterval], [0.0, 0.2, longInterval], 
                      [0.0, 0.4, shortInterval], [1.0, 0.4, longInterval], 
                      [1.0, 0.6, shortInterval], [0.0, 0.6, longInterval], 
                      [0.0, 0.8, shortInterval], [1.0, 0.8, longInterval], 
                      [1.0, 1.0, shortInterval], [0.0, 1.0, endInterval]];
        
        for (var p = 0; p < points.length; ++p) {
            items.add(Observable({x: points[0][0], y: points[0][1]}))
        }

        var next = function() {
            if (currPoint >= points.length) {
                items.clear();
                for (var p = 0; p < points.length; ++p) {
                    items.add(Observable({x: points[0][0], y: points[0][1]}))
                }
                currPoint = 0; 
            } else { 
                for (var p = currPoint; p < points.length; ++p) {
                    items.getAt(p).value = {x: points[currPoint][0], y: points[currPoint][1]};
                }
                interval = points[currPoint][2];
            } 
            clearInterval(lastTimer);
            lastTimer = setTimeout(next, points[currPoint][2]);
            currPoint += 1;
        }
        var lastTimer = setTimeout(next, points[currPoint][2]);
    </JavaScript>   

    <AttractorConfig ux:Global="lineAnim" Type="SmoothSnap" Duration="0.5" Unit="Normalized" />  
    <Curve StrokeWidth="2.5" StrokeColor="#fffa" HitTestMode="LocalBounds" Style="Straight" Margin="50" Close="None">
        <DropShadow Size="6" Spread="0.5" Color="#FFF5" Distance="0"/>
        <Each ux:Name="lines" Items="{items}"> 
            <CurvePoint X="attract({x},lineAnim)" Y="attract({y},lineAnim)" />
        </Each> 
    </Curve> 
</App>
```