The following code does not produce any animation. I want to use the bottom script tag to programmatically create and change animations. thanks for the help
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TANACH-CHUNKS</title>
<meta name="description" content="Cursor - A-Frame">
<script src="js/aframe.min.js"></script>
</head>
<body>
<a-scene id = "sceneEl">
<a-entity
position="0 -1.5 2.5"
>
<a-camera
id="camera"
keyboard-controls="enabled: true"
wasd-controls="acceleration: 10; enabled: false; adAxis:x"
>
<a-entity
cursor="rayOrigin: mouse; fuse: true; fuseTimeout: 500"
id="cursor1"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.001; radiusOuter: 0.01"
material="color: blue; shader: flat"
>
</a-entity>
</a-camera>
</a-entity>
</a-entity>
<a-entity id="box" geometry="primitive: box" material="color: red" position="0 0 0" rotation="0 30 0"
animation__mouseup="property: components.material.material.color; type: color; from: red; to: blue; startEvents: mouseup; dur: 5000"
animation__mouseup="property: components.material.material.color; type: color; from: blue; to: red; startEvents: mouseup; dur: 5000"
>
</a-entity>
<script>
box.setAttribute("animation","property: position; to: 2 2 0; dur: 2000;");
</script>
</body>
</html>
Your animation property code works as expected, but other errors (namely, an extraneous </a-entity> tag in the middle and missing tags at the end) prevent it from compiling. Here is the same code cleaned up, which works for me (assuming your path to aframe.min.js is correct):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TANACH-CHUNKS</title>
<meta name="description" content="Cursor - A-Frame" />
<script src="js/aframe.min.js"></script>
</head>
<body>
<a-scene id="sceneEl">
<a-entity position="0 -1.5 2.5">
<a-camera
id="camera"
keyboard-controls="enabled: true"
wasd-controls="acceleration: 10; enabled: false; adAxis:x"
>
<a-entity
cursor="rayOrigin: mouse; fuse: true; fuseTimeout: 500"
id="cursor1"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.001; radiusOuter: 0.01"
material="color: blue; shader: flat"
></a-entity>
</a-camera>
</a-entity>
<a-entity
id="box"
geometry="primitive: box"
material="color: red"
position="0 0 0"
rotation="0 30 0"
animation__mouseup="property: components.material.material.color; type: color; from: red; to: blue; startEvents: mouseup; dur: 5000"
animation__mousedown="property: components.material.material.color; type: color; from: blue; to: red; startEvents: mousedown; dur: 5000"
>
</a-entity>
</a-scene>
</body>
</html>