MooTools Fx.Options - MooTools

What is MooTools Fx.Options?

MooTools gives different Fx.options with the intention to help to Fx.Tween and Fx.Morph. These options will give you manage over the results.

Let us discuss some alternatives that MooTools provide. Earlier than we proceed, take a look at the subsequent syntax for setting up options.

Syntax

fps(frames per second)

This option determines the number of frames per second in the animation while morphing. We can apply this fps to Morph or Tween functionalities. By default, the value of fps is 50. This means any functionality will take 50 frames per second while morphing.

Example

Let us take an example wherein, we will morph a div element using 5 fps. Take a look at the following code.

You will receive the following output −

Output

Click on the START button to find the morphing animation. This helps us observe the number of frames used for animation. Use different values for fps to get the difference in animation. It is recommended to use the fps value less than 10. This will help you get the difference easily.

Unit

This option is used to set the unit type for numbers. Generally, we have three different types of units — px, %, and ems. Take a look at the following syntax.

Syntax

The above syntax is to allocate percentage to units. This means all the values in numbers are treated as percentages.

link

This option provides a way to manage multiple calls to start an animation. If you apply multiple event calls at a time, these calls will be taken in as link calls. Once the first call finishes, then the second call executes automatically. It contains the following three options −

  • Ignore − This is the default option. It ignores any number of calls until it completes the effect.
  • Cancel − This cancels the current effect, when there is another being made. It follows the newest call precedence.
  • Chain − This lets you chain the effects together and maintain the stack of calls. It executes all the calls until it goes through all the chained calls in the stack.

Take a look at the following syntax for using the link option.

Syntax

Duration

This option is used to define the duration of the animation. For example, if you want an object to move 100px in the duration of 1 second, then it will go slower than an object moving 1000px in 1 second. You can input a number which is measured in milliseconds. Or you can use any of these three options in place of numbers.

  • Short = 250ms
  • Normal = 500ms (default)
  • Long = 1000ms

Take a look at the following syntax for using duration.

Syntax

Or,

Transition

This option is used to determine the transition type. For example, if it should be a smooth transition or should it start out slowly then speed up towards the end. Take a look at the following syntax to apply transition.

Syntax


The following table describes the different types of transitions.

S.No.

Transition type & Description

1

Linear

Displays a linear transition with in, out, in-out events

2

Quad

Displays a quadratic transition with in, out, in-out events

3

Cubic

Displays a cubicular transition with in, out, in-out events

4

Quart

Displays a quartetic transition with in, out, in-out events

5

Quint

Displays a quintic transition with in, out, in-out events

6

Pow

Used to generate Quad, Cubic, Quart and Quint with in, out, in-out events

7

Expo

Displays an exponential transition with in, out, in-out events

8

Cric

Displays a circular transition with in, out, in-out events

9

Sine

Displays a sineousidal transition with in, out, in-out events

10

Back

Makes the transition go back, then all forth with in, out, in-out events

11

Bounce

Makes the transition bouncy with in, out, in-out events

12

Elastic

Elastic curve transition with in, out, in-out events

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

MooTools Topics