Skip to content

WEBVR Lesson 2

What you will learn about WEBVR in Lesson Two:

 

  1. Animating 3D objects
  2. Interactive Navigation

 

Animating

Example moving a box:

<a-box position="-1 1.6 -5" animation="property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-box>

List of Easing effets

easeIn easeOut easeInOut Others
easeInQuad easeOutQuad easeInOutQuad linear
easeInCubic easeOutCubic easeInOutCubic
easeInQuart easeOutQuart easeInOutQuart
easeInQuint easeOutQuint easeInOutQuint
easeInSine easeOutSine easeInOutSine
easeInExpo easeOutExpo easeInOutExpo
easeInCirc easeOutCirc easeInOutCirc
easeInBack easeOutBack easeInOutBack
easeInElastic easeOutElastic easeInOutElastic

Test Easing Animation online, click the link below:

 Test Easing

Download Lesson 2 Resources