Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-02-26T11:07:55.080Z
Answers.LastActivityDate: 2021-02-26T11:07:55.080Z
Answers.UserDisplayName: tomh
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-03-03T05:47:12.317Z
Answers.LastActivityDate: 2021-03-03T05:47:12.317Z
Answers.UserDisplayName: stib
Body: <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>
  
Tags: <after-effects>
Title: Animate variable inside expression
UserDisplayName: Anders Lindén
ThreadText: # 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
  
  ```js
  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.
  
  [![heart](https://i.sstatic.net/p6uAS.png)](https://i.sstatic.net/p6uAS.png)
  
  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++) {
  
  ```
  
  
  ---
  
  