Transition / Appear Effects
The most common use of animated effects on web pages is to make the appearing / disappearing of elements on the page more attractive.
The behave3d lib allows such common tasks to be ordered on the elements without knowing which controllers will actually perform the tasks.
For this reason, every behave3d element has an automatically-generated actions(id: a) controller,
which receives messages sent to the element itself (via
and fires an event on each message received.
Such messages sent to the element and not to a particular controller are called actions.
So, a controller which needs to handle the element's, for example,
needs to set event listeners on the
actions() controller for events with the same names.
All basic transforms controllers, as well as the controllers specially designed for transitions, have a parameter
which, if set, tells the controller to create by itself such event handlers on the element's
For clarity about what really happens, in the examples below, the event handlers will be defined manually.
Transitions With Simple Transforms
Let's see how some combinations of simple transforms make for pleasing transitions. Note that the examples below all use the default ease type and amount with smooth start and finish for all controllers, which makes animations look smooth as there are no sudden changes in speed.
Transitions With Specialized Controllers
The behave3d library also contains controllers that perform more complex transformations/transitions onto their HTML elements.
Some of these controllers manage this by spawning several basic controllers and coordinating them.
An example for this is the popRot() controller, which instantiates 3 sub-controllers -
move() one for the translation,
rotate() one for the rotation and
opacity() one for controlling the opacity.