<ol>
<li>Press the triangle marked &quot;Add&quot; next to the Contents of your shape layer.</li>
<li>Add a &quot;trim path&quot;</li>
<li>Add a keyframe to the &quot;End&quot; parameter of 0%.</li>
<li>Move along your timeline.</li>
<li>Add another keyframe of 100%.</li>
</ol>
<p>Your path will draw on.
You probably don't want to fill it until it is drawn.
<a href="https://i.sstatic.net/iTMkk.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/iTMkk.png" alt="grab" /></a></p>

CC BY-SA 4.0
2021-02-26T11:07:55.080Z
2021-02-26T11:07:55.080Z
tomh
<p>Tom's answer is a good way to do it, but if you're interested, to do it only in the expression, just add a couple of lines at the start like</p>
<pre><code>myDuration = 5; // the duration of the animation in seconds
let completion = Math.min(time/myduration, 1)
</code></pre>
<p>and then in the <code>for</code> loop, substitute &quot;360&quot; with <code>360 * completion</code></p>
<pre><code>for (var a = 0; a &lt; (360 * completion); a++) {
</code></pre>

CC BY-SA 4.0
2021-03-03T05:47:12.317Z
2021-03-03T05:47:12.317Z
stib
<p>In After Effects, I created a shape layer, added a path to that, edited the expression of it to contain</p>
<pre class="lang-js prettyprint-override"><code>var path = thisProperty;
var cx = 100;
var cy = 200;
var r1 = 300;
var ratio =  20;
var quality = 30;
var closedPath = true;
var allPoints = new Array();

for (var a = 0; a &lt; 360; a++) {
    var theta = degreesToRadians(a);
    x0 = Math.cos(theta);
    x = cx + r1 * x0;
    y = cy + 0.75 * r1 * (Math.sin(theta) - Math.sqrt(Math.abs(x0)));
    allPoints.push([x,y]);
}
path.createPath(allPoints, [], [], closedPath);
</code></pre>
<p>and added a stroke and a fill to the shape layer and set the width of the stroke to 10 and the color of the fill to light red. I got this shape as a result.</p>
<p><a href="https://i.sstatic.net/p6uAS.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/p6uAS.png" alt="heart" /></a></p>
<p>Now, I want to animate the end point of that stroke, you may see that I am looping the variable <code>a</code> from 0 to 360. That 360 value represents the end angle of the shape and I would like to have it animated to make an animation that &quot;draws&quot; the heart.</p>
<p>How do I animate the end value?</p>
<p>Is there a way to add a &quot;dummy effect&quot; so I can use it like</p>
<pre><code>var a_max = effect(&quot;dummy&quot;)(&quot;endpoint&quot;)
</code></pre>

<after-effects>
Animate variable inside expression
Anders Lindén
# Animate variable inside expression

(Asked by: username_0 on 2021-02-25)

In After Effects, I created a shape layer, added a path to that, edited the expression of it to contain
var path = thisProperty;
var cx = 100;
var cy = 200;
var r1 = 300;
var ratio =  20;
var quality = 30;
var closedPath = true;
var allPoints = new Array();

for (var a = 0; a < 360; a++) {
    var theta = degreesToRadians(a);
    x0 = Math.cos(theta);
    x = cx + r1 * x0;
    y = cy + 0.75 * r1 * (Math.sin(theta) - Math.sqrt(Math.abs(x0)));
    allPoints.push([x,y]);
}
path.createPath(allPoints, [], [], closedPath);

and added a stroke and a fill to the shape layer and set the width of the stroke to 10 and the color of the fill to light red. I got this shape as a result.

Now, I want to animate the end point of that stroke, you may see that I am looping the variable a from 0 to 360. That 360 value represents the end angle of the shape and I would like to have it animated to make an animation that "draws" the heart.
How do I animate the end value?
Is there a way to add a "dummy effect" so I can use it like
var a_max = effect("dummy")("endpoint")

**Tags:** after-effects


---

## 2 answers

### Answer by username_1 on 2021-02-26. Score: 2 | Accepted answer

1. Press the triangle marked "Add" next to the Contents of your shape layer.
2. Add a "trim path"
3. Add a keyframe to the "End" parameter of 0%.
4. Move along your timeline.
5. Add another keyframe of 100%.

Your path will draw on.
You probably don't want to fill it until it is drawn.
[![grab](https://i.sstatic.net/iTMkk.png)](https://i.sstatic.net/iTMkk.png)


---

### Answer by username_2 on 2021-03-03. Score: 0

Tom's answer is a good way to do it, but if you're interested, to do it only in the expression, just add a couple of lines at the start like
myDuration = 5; // the duration of the animation in seconds
let completion = Math.min(time/myduration, 1)

and then in the for loop, substitute "360" with 360 * completion
for (var a = 0; a < (360 * completion); a++) {


---

