<p>Use masks. Make a mask with 5 points, one in the centre of the circle two on either side in line with the first and two far enough away so that the mask covers half the circle. Then animate the second two points to travel together and meet in the centre.</p>

<p>Actually do the above, but reverse the order.</p>

<p>Here it is with a matte layer to show you the shape of the mask I'm talking about.</p>

<p><a href="https://i.sstatic.net/TCkwy.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/TCkwy.gif" alt="enter image description here"></a></p>

<p>and the end result</p>

<p><a href="https://i.sstatic.net/jM1HL.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/jM1HL.gif" alt="enter image description here"></a></p>

<p>Remember that the points on animated masks travel in <strong>straight lines</strong> between keyframes. So the beginning and end positions of the moving points have to be far enough out that they don't go inside the circle.</p>

<p><strong>Edit</strong></p>

<p>Here's an expression to create a circle, and a line and interpolate between the two. The intermediate frames are kinda ugly, I'd probably convert the expression to keyframes and delete all but the first and last frames, then manually animate the in-between.</p>

<p><a href="https://i.sstatic.net/i9XfS.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/i9XfS.gif" alt="circle turning into a line"></a></p>

<pre class="lang-js prettyprint-override"><code>var radius = 100;
var animationDuration = 2;
//You can't draw a perfect circle with Beziers, but this is a good approximation
var handleLength = radius * 4 * (Math.sqrt(2)-1)/3; //Because maths. 
var circlePoints = [];
var outHandles = [];
var inHandles =[];
var Tau = 2* Math.PI;
for (i = 0; i &lt; 5; i++){
    circlePoints[i] = [Math.sin(Tau * i/4) * radius, Math.cos(Tau * i/4) * radius];
    outHandles[i] = [Math.sin(Tau * (i+1)/4) * handleLength, Math.cos(Tau * (i+1)/4) * handleLength];
    inHandles[i] = [0,0] - outHandles[i];
}

var linePoints = [];
var lineInHandles = [];
var lineOutHandles = [];

for (i = 0; i &lt; 5; i++){
    linePoints[i] = [radius * (1 - i / 2), 0];
}
var thePoints = [];
var theinTangents = [];
var theOutTangents =  [];

var t = Math.min(time / animationDuration, 1);
for (i = 0; i &lt; 5; i++){
    thePoints[i] = circlePoints[i] * (1-t) + linePoints[i] * t;
    theinTangents[i] = inHandles[i] * (1-t);
    theOutTangents[i] =  outHandles[i] * (1-t);
}

createPath(points = thePoints, inTangents = theinTangents, outTangents = theOutTangents, isClosed = false);
</code></pre>

CC BY-SA 4.0
2019-08-22T09:38:23.463Z
I think he's asking how to change the circumference of the circle into a straight line - ie unbend the shape of a circle into a line
tomh
CC BY-SA 4.0
2019-08-22T10:07:10.847Z
You can freehand draw a circle using the pen tool, then freehand draw a line with four points, set a keyframe for the path of the circle, copy the path attribute from the line and paste it onto the circle path further down the timeline. But the intermediate shape will be messy. Otherwise you can just scale a circle down on the y axis until it's completely flat. Depends what you want the intermeiate shapes to look like.
stib
CC BY-SA 4.0
2019-08-22T10:47:37.743Z
Is there a sensible way to do it programmatically?
tomh
CC BY-SA 4.0
2019-08-23T02:22:03.840Z
See my edit above
stib
CC BY-SA 4.0
2019-08-24T15:15:02.937Z
UV'd (drive-by), great answer. Still don't get the general voting mentality here...
p2or
CC BY-SA 4.0
2019-08-25T02:58:01.663Z
It's a fairly low volume site, things don't get the kind of upvotes they do on SO or Superuser, even if they're as brilliant as my answers always are.
stib
CC BY-SA 4.0
2019-07-23T06:42:21.827Z
2019-08-23T02:17:59.657Z
2019-08-23T02:17:59.657Z
stib
<p>See <a href="https://forums.adobe.com/thread/1601711" rel="nofollow noreferrer">How to transform a Circle into a Straight line?</a>  </p>

<p>Here, Rick Gerard gives a few suggestions how you could do it.</p>

<p>I guess the best way would be to make a line and bend it like a circle, zoom really far in and put the end points near each other, but don't connect them.</p>

CC BY-SA 4.0
2019-02-21T20:38:10.093Z
2019-08-24T12:17:06.057Z
2019-08-24T12:17:06.057Z
Timothy Lukas H.
<p>I would like to create an animation to open circumference of a circle as a straight line exactly. I am currently learning After Effects and i have some idea about it but i could not do it. </p>

<p>It is very important to me. Can anyone help me to do it?</p>

CC BY-SA 4.0
2019-02-21T09:16:02.683Z
I'd be interested in knowing this too.. Initially I thought you could turn a circle path into a bezier, but this doesn't work as the bezier is joined up, and also the paths are "stretchy".  I'm guessing you need to do it as an expression somehow, maybe with beams?
tomh
<after-effects><animation>
How can i open circumference of circle as straight line in After Effects?
Math Doubts
# How can i open circumference of circle as straight line in After Effects?

(Asked by: username_0 on 2019-02-21)

I would like to create an animation to open circumference of a circle as a straight line exactly. I am currently learning After Effects and i have some idea about it but i could not do it.

It is very important to me. Can anyone help me to do it?

**Tags:** after-effects, animation

> **Comments:**
> **username_1**: I'd be interested in knowing this too.. Initially I thought you could turn a circle path into a bezier, but this doesn't work as the bezier is joined up, and also the paths are "stretchy".  I'm guessing you need to do it as an expression somehow, maybe with beams?  

---

## 2 answers

### Answer by username_2 on 2019-07-23. Score: 2

Use masks. Make a mask with 5 points, one in the centre of the circle two on either side in line with the first and two far enough away so that the mask covers half the circle. Then animate the second two points to travel together and meet in the centre.
Actually do the above, but reverse the order.
Here it is with a matte layer to show you the shape of the mask I'm talking about.

and the end result

Remember that the points on animated masks travel in straight lines between keyframes. So the beginning and end positions of the moving points have to be far enough out that they don't go inside the circle.
Edit
Here's an expression to create a circle, and a line and interpolate between the two. The intermediate frames are kinda ugly, I'd probably convert the expression to keyframes and delete all but the first and last frames, then manually animate the in-between.

var radius = 100;
var animationDuration = 2;
//You can't draw a perfect circle with Beziers, but this is a good approximation
var handleLength = radius * 4 * (Math.sqrt(2)-1)/3; //Because maths. 
var circlePoints = [];
var outHandles = [];
var inHandles =[];
var Tau = 2* Math.PI;
for (i = 0; i < 5; i++){
    circlePoints[i] = [Math.sin(Tau * i/4) * radius, Math.cos(Tau * i/4) * radius];
    outHandles[i] = [Math.sin(Tau * (i+1)/4) * handleLength, Math.cos(Tau * (i+1)/4) * handleLength];
    inHandles[i] = [0,0] - outHandles[i];
}

var linePoints = [];
var lineInHandles = [];
var lineOutHandles = [];

for (i = 0; i < 5; i++){
    linePoints[i] = [radius * (1 - i / 2), 0];
}
var thePoints = [];
var theinTangents = [];
var theOutTangents =  [];

var t = Math.min(time / animationDuration, 1);
for (i = 0; i < 5; i++){
    thePoints[i] = circlePoints[i] * (1-t) + linePoints[i] * t;
    theinTangents[i] = inHandles[i] * (1-t);
    theOutTangents[i] =  outHandles[i] * (1-t);
}

createPath(points = thePoints, inTangents = theinTangents, outTangents = theOutTangents, isClosed = false);

> **Comments:**
> **username_1**: I think he's asking how to change the circumference of the circle into a straight line - ie unbend the shape of a circle into a line  
> **username_2**: You can freehand draw a circle using the pen tool, then freehand draw a line with four points, set a keyframe for the path of the circle, copy the path attribute from the line and paste it onto the circle path further down the timeline. But the intermediate shape will be messy. Otherwise you can just scale a circle down on the y axis until it's completely flat. Depends what you want the intermeiate shapes to look like.  
> **username_1**: Is there a sensible way to do it programmatically?  
> **username_2**: See my edit above  
> **username_3**: UV'd (drive-by), great answer. Still don't get the general voting mentality here...  
> **username_2**: It's a fairly low volume site, things don't get the kind of upvotes they do on SO or Superuser, even if they're as brilliant as my answers always are.  

---

### Answer by username_4 on 2019-02-21. Score: 0

See [How to transform a Circle into a Straight line?](https://forums.adobe.com/thread/1601711)

Here, Rick Gerard gives a few suggestions how you could do it.

I guess the best way would be to make a line and bend it like a circle, zoom really far in and put the end points near each other, but don't connect them.


---

