# Use Animation Clip to Move the End-point of a Line

**URL:** <https://discourse.threejs.org/t/use-animation-clip-to-move-the-end-point-of-a-line/49196>\
**Category:** Questions\
**Tags:** animation, geometry\
**Created:** [March 16, 2023, 10:12pm UTC](https://discourse.threejs.org/t/use-animation-clip-to-move-the-end-point-of-a-line/49196 "2023-03-16T22:12:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarkAtLST](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@MarkAtLST](https://discourse.threejs.org/u/MarkAtLST)\
**Post date:** [March 16, 2023, 10:12pm UTC](https://discourse.threejs.org/t/use-animation-clip-to-move-the-end-point-of-a-line/49196/1 "2023-03-16T22:12:46Z")

</div>

Hello,

Is it possible to use an animation clip to move the end-point of a line?

I create a line:

```javascript
	let points = [];
	points.push( new THREE.Vector3(0, 0, 0) );
	points.push( new THREE.Vector3(0.5, 0.5, 0.5) );
	const geometry = new THREE.BufferGeometry().setFromPoints( points );
	const line = new THREE.Line( geometry, material );
	scene.add( line );

```

then later in code, I add a KeyFrame to an existing animation clip:

```javascript
	let times = [0, 2];
	let values = [0.5, 0.5, 0.5 , 1.0, 1.0, 1.0];
	let name = line.uuid + '.geometry.attributes.position.array[3]';
	const moveKF = new VectorKeyframeTrack(name, times, values);
	existing_animation.tracks.push(moveKF);

```

But when I play the animation, the ‘bind’ code uses the scene group in place of the Line (via uuid) and fails to resolve the ‘property’ properly.

Is there a proper way to do this?

Thanks.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 17, 2023, 11:54am UTC](https://discourse.threejs.org/t/use-animation-clip-to-move-the-end-point-of-a-line/49196/2 "2023-03-17T11:54:07Z")

</div>

> [@MarkAtLST](#):
>
> Is it possible to use an animation clip to move the end-point of a line?

Try it with morph targets instead. Meaning you create a morph attribute of your final line state and then use the animation system to animate between the base and morphed geometry.

---

<div class="post-metadata">

**Author:** ![MarkAtLST](https://avatars.discourse-cdn.com/v4/letter/m/e274bd/32.png) [@MarkAtLST](https://discourse.threejs.org/u/MarkAtLST)\
**Post date:** [March 20, 2023, 10:16pm UTC](https://discourse.threejs.org/t/use-animation-clip-to-move-the-end-point-of-a-line/49196/3 "2023-03-20T22:16:34Z")

</div>

Mugen87 thank you for the lead (and necessary keyword) to find it.

My now working code looks like this…

I create a line:

```javascript
	let begPos = [];
	begPos[0] = 0; // beginning point-0-x
	begPos[1] = 0; // beginning point-0-y
	begPos[2] = 0; // beginning point-0-z
	begPos[3] = .5; // beginning point-1-x
	begPos[4] = .5; // beginning point-1-y
	begPos[5] = .5; // beginning point-1-z
	let begAttr = new THREE.Float32BufferAttribute( begPos, 3 );
	const geometry = new THREE.BufferGeometry();
	geometry.setAttribute( 'position', begAttr, 3 );
	let endPos = [];
	endPos[0] = 0; // beginning point-0-x
	endPos[1] = 0; // beginning point-0-y
	endPos[2] = 0; // beginning point-0-z
	endPos[3] = 1; // beginning point-1-x
	endPos[4] = 1; // beginning point-1-y
	endPos[5] = 1; // beginning point-1-z
	let endAttr = new THREE.Float32BufferAttribute( endPos, 3 );
	geometry.morphAttributes.position = [endAttr];
	const line = new THREE.Line( geometry, material );
	line.morphTargetInfluences = [0]; // 1 entry array, values 0 - no influence to start
	scene.add( line );

```

then later in my code, I add a keyFrame to an existing animation clip that changes the morphTargetInfluences:

```javascript
	let times = [0, 2];
	let values = [0, 1];
	let name = line.uuid + '.morphTargetInfluences[0]';
	const morphKF = new NumberKeyframeTrack(name, times, values);
	existing_animation.tracks.push(morphKF);

```

The animation morphs the line from P1 (0,0,0) - P2 (.5,.5,.5) into  
the line P1 (0,0,0) - P2 (1,1,1) over a 2 second time period.

Things I learned along the way:

1. the items you are morphing between MUST match!!! A 6 entry array of 1 item each DOES NOT match up with a 2 entry array of 3 items each.

2. the morph entries are all arrays (even if there is only 1 entry).

3. the morphTargetInfluences goes on the object (in this case the Line) that hold the geometry.

Hopefully someone else finds this example and notes helpful.

- Happy Coding!