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 Behave3d(element).message("msg")) 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, show and hide actions 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 register_actions, which, if set, tells the controller to create by itself such event handlers on the element's actions() controller. 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.

A two-sided element with h-flip animation move() | move() | scale() | rotate()
Expanded element
A two-sided element with h-double-flip animation rotate() | move() | move()
Expanded element
A two-sided element with v-flip animation move() | rotate()
Expanded element
A popping element with animation move() | move() | opacity()
Popup element
An element with children popping with animation move() | move() | opacity()
A Series
of
Popup Elements

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 - a move() one for the translation, a rotate() one for the rotation and a opacity() one for controlling the opacity.

DOM Element