A-Frame plugin for Popmotion
Popmotion Actor role to enable A-Frame animation, physics and input tracking.
Examples
- Physics
- Some rather obnoxious-yet-demonstrative animation](http://codepen.io/popmotion/pen/GoZpjo?editors=101)
Use
;; const cube = element: document as: aframeRole;
cube
is now a standard Popmotion Actor
, except with an applied A-Frame Role.
This allows you to run a standard Tween
, Simulate
or Track
action:
const moveBackAndForth = values: x: 5 duration: 600 ease: 'easeInOut' yoyo: true; cubestartmoveBackAndForth;
Create many A-Frame Actors
As A-Frame elements are DOM elements, you can use ui.select
to create multiple Actors
at once. For instance:
ui;
Will return an Iterator
of Actor
elements (see full documentation). You must remember to set as
on Actor initialisation.
Supported properties
All numerical properties can be set with Popmotion.
position
properties can be set withx
,y
, andz
.scale
androtation
properties can be set egscaleX
androtateY
.- Dash-case characters are set as camelCase, eg
radius-bottom
becomesradiusBottom
.
Advanced: create an A-Frame Actor
If you're creating a lot of A-Frame Actors and don't want to set as
each time, you could make something like this:
;; { propsas = aframeRole; superprops ...args; } const cube = document;