I want to know if I can make one object, like a box or sphere, do 2 animations, as in rotation and color. I know you can set these in the property section of the animation attribute, but if I try to put multiple animation attributes on one object, or if I try to put 2 properties in 1 animation attribute, it either doesn't animate, or only does one of the animations. Here is the code I'm using, I would appreciate if any of you could edit it to make it work, if this is possible:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="lightblue"></a-sky>
<a-box position="0 0 -5" width="2" depth="2" height="2" color= rgb(0,0,0)
animation="
property: rotation;
from: 0 0 0;
to: -360 -360 -360;
loop: true;
dur: 3000;
dir: alternate;
property: color;
from: rgb(0,0,0);
to: rgb(255,255,255);
loop: true;
dur: 3000;
dir: alternate;"></a-box>
</a-scene>
</body>
</html>
You need to split the animation instructions into separate animation components, which should look like this:
animation__<id>="stuff"
// like this:
animation__first="single animation related stuff"
animation__second="another single animation related stuff"
your code should look a bit more like this:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-sky color="lightblue"></a-sky>
<a-box position="0 0 -5" width="2" depth="2" height="2" color=rgb(0,0,0)
animation__rotation="
property: rotation;
from: 0 0 0;
to: -360 -360 -360;
loop: true;
dur: 3000;
dir: alternate;"
animation__color="
property: color;
from: rgb(0,0,0);
to: rgb(255,255,255);
loop: true;
dur: 3000;
dir: alternate;"></a-box>
</a-scene>