CODEWITHSUNDEEP
htmlanimationaframe
Quincy Norbert
Quincy Norbert

Reputation: 451

A-frame animation to value and back

I am currently working with a-frame for the first time and can't figure out how to animate back to the starting point again. Currently I have an arm rotating 90 degrees and when it has done that it snaps back to it's original position. How can I make it so that the animation goes from 0 degrees to 90 degrees and back. 

<a-obj-model src="#robot" mtl="#material" position="0 0 -150">
</a-obj-model>
<a-obj-model src="#robotshoulder" mtl="#material" position="0 0 -150">
    <a-animation attribute="rotation"
        dur="3000"
        fill="both"
        from="0 0 0"
        to="90 0 0"
        repeat="indefinite"></a-animation>
    <a-obj-model src="#robotarmr" mtl="#material">
    </a-obj-model>
</a-obj-model>

Thanks for the help already!

Upvotes: 0

Views: 1152

Answers (1)

Riccardo
Riccardo

Reputation: 165

Try using direction="alternate" in your animation properties.

From the A-Frame docs:

The direction attribute defines which way to animate between the starting value and the final value. When we define an alternating direction, the animation will go back and forth between the from and to values like a yo-yo. Alternating directions only take affect when we repeat the animation.

Upvotes: 2

Related Questions