scripty2 API documentation | S2.FX.Transitions namespace

Home →
scripty2 fx →

namespace S2.FX.Transitions

Description

Transitions can fine-tune how an effect evolves over time. All effects, without the use of transitions, normally evolve linearily.

All transitions take a position argument, which is between 0 (start of effect) and 1 (end of effect). Transitions return a number, which is a "translation" of position argument. The return value can, depending on transition type, be above 1 or below 0.

By using Transitions, it is easily possible to add movement easing, pulsation, bouncing, reversal and other forms of special effects.

Default transition

S2.FX.Transitions.sinusoidal is used. This setting can be changed by redefining S2.FX.DefaultOptions.transition.

Implementing your own transitions

Transitions can easily be added, by using this template: Object.extend(S2.FX.Transitions, { myTransition: function(pos) { return pos; // do your calculations here! } }); Transitions defined this way automatically become available to be used with the shorthand syntax for the `options.transition` argument: $('some_element').morph('left:300px', { transition: 'myTransition' });

Notice

Methods

Class methods

blink #
```
S2.FX.Transitions.blink(pos[, blinks]) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
- pulses (Number) – Number of blinks, defaults to 5
Effect blinks on and off.

01
movement
color
size
hover over this area to see the transition at different speeds
bounce #
```
S2.FX.Transitions.bounce(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
bouncePast #
```
S2.FX.Transitions.bouncePast(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeFrom #
```
S2.FX.Transitions.easeFrom(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeFromTo #
```
S2.FX.Transitions.easeFromTo(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInBack #
```
S2.FX.Transitions.easeInBack(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInCirc #
```
S2.FX.Transitions.easeInCirc(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInCubic #
```
S2.FX.Transitions.easeInCubic(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInExpo #
```
S2.FX.Transitions.easeInExpo(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInOutBack #
```
S2.FX.Transitions.easeInOutBack(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInOutCirc #
```
S2.FX.Transitions.easeInOutCirc(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInOutCubic #
```
S2.FX.Transitions.easeInOutCubic(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInOutExpo #
```
S2.FX.Transitions.easeInOutExpo(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInOutQuad #
```
S2.FX.Transitions.easeInOutQuad(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInOutQuart #
```
S2.FX.Transitions.easeInOutQuart(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInOutQuint #
```
S2.FX.Transitions.easeInOutQuint(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInOutSine #
```
S2.FX.Transitions.easeInOutSine(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInQuad #
```
S2.FX.Transitions.easeInQuad(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInQuart #
```
S2.FX.Transitions.easeInQuart(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInQuint #
```
S2.FX.Transitions.easeInQuint(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeInSine #
```
S2.FX.Transitions.easeInSine(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeOutBack #
```
S2.FX.Transitions.easeOutBack(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeOutBounce #
```
S2.FX.Transitions.easeOutBounce(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeOutCirc #
```
S2.FX.Transitions.easeOutCirc(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeOutCubic #
```
S2.FX.Transitions.easeOutCubic(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeOutExpo #
```
S2.FX.Transitions.easeOutExpo(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeOutQuad #
```
S2.FX.Transitions.easeOutQuad(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeOutQuart #
```
S2.FX.Transitions.easeOutQuart(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeOutQuint #
```
S2.FX.Transitions.easeOutQuint(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeOutSine #
```
S2.FX.Transitions.easeOutSine(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
easeTo #
```
S2.FX.Transitions.easeTo(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
elastic #
```
S2.FX.Transitions.elastic(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
flicker #
```
S2.FX.Transitions.flicker(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
Effect flickers along a sine wave.

01
movement
color
size
hover over this area to see the transition at different speeds
full #
```
S2.FX.Transitions.full() -> Number
```
No transition, the effect is always in final state (returns 1 regardless of input values).

01
movement
color
size
hover over this area to see the transition at different speeds
linear #
```
S2.FX.Transitions.linear(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
Basic linear transition, no easing or other alteration of the effect.

01
movement
color
size
hover over this area to see the transition at different speeds
mirror #
```
S2.FX.Transitions.mirror(pos[, transition]) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
- transition (Function) – a S2.FX.Transitions transition function
The given transition is mirrored. Defaults to S2.FX.Transitions.sinusoidal.

01
movement
color
size
hover over this area to see the transition at different speeds

You can use other transitions as per the following code sample:
```
$('element_id').morph('font-size:200px', {
  transition: function(pos){
    return S2.FX.Transitions.mirror(pos, S2.FX.Transitions.bounce);
  }
});
```
If you plan to reuse such a mirrored transition often, define your own transition function:
```
S2.FX.Transitions.mirroredBounce = function(pos){
  return S2.FX.Transitions.mirror(pos, S2.FX.Transitions.bounce);
});

$('element_id').morph('font-size:200px', { transition: 'mirroredBounce' });
```
none #
```
S2.FX.Transitions.none() -> Number
```
No transition, the effect stays in intial state (returns 0 regardless of input values).

01
movement
color
size
hover over this area to see the transition at different speeds
pulse #
```
S2.FX.Transitions.pulse(pos[, pulses]) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
- pulses (Number) – Number of pulses, defaults to 5
Effect pulses along a sinusoidal transition.

01
movement
color
size
hover over this area to see the transition at different speeds
reverse #
```
S2.FX.Transitions.reverse(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
Effect is executed in a reverse linear fashion.

01
movement
color
size
hover over this area to see the transition at different speeds
sinusoidal #
```
S2.FX.Transitions.sinusoidal(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
Alters the effect timing to be aligned to a sine wave.

01
movement
color
size
hover over this area to see the transition at different speeds
spring #
```
S2.FX.Transitions.spring(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
Alters the effect timing to a "spring".

01
movement
color
size
hover over this area to see the transition at different speeds
swingFrom #
```
S2.FX.Transitions.swingFrom(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
swingFromTo #
```
S2.FX.Transitions.swingFromTo(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
swingTo #
```
S2.FX.Transitions.swingTo(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
01
movement
color
size
hover over this area to see the transition at different speeds
webkitCubic #
```
S2.FX.Transitions.webkitCubic(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
The default WebKit CSS transition easing function.

01
movement
color
size
hover over this area to see the transition at different speeds
webkitEaseInOut #
```
S2.FX.Transitions.webkitEaseInOut(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
The WebKit CSS transition "ease-in-out" easing function.

01
movement
color
size
hover over this area to see the transition at different speeds
wobble #
```
S2.FX.Transitions.wobble(pos) -> Number
```
- pos (Number) – position between 0 (start of effect) and 1 (end of effect)
Effect wobbles increasingly fast between start and end positions.

01
movement
color
size
hover over this area to see the transition at different speeds

scripty2

Quick Links ↓

namespace S2.FX.Transitions

Description

Default transition

Implementing your own transitions

Notice

Methods

Class methods

blink #

bounce #

bouncePast #

easeFrom #

easeFromTo #

easeInBack #

easeInCirc #

easeInCubic #

easeInExpo #

easeInOutBack #

easeInOutCirc #

easeInOutCubic #

easeInOutExpo #

easeInOutQuad #

easeInOutQuart #

easeInOutQuint #

easeInOutSine #

easeInQuad #

easeInQuart #

easeInQuint #

easeInSine #

easeOutBack #

easeOutBounce #

easeOutCirc #

easeOutCubic #

easeOutExpo #

easeOutQuad #

easeOutQuart #

easeOutQuint #

easeOutSine #

easeTo #

elastic #

flicker #

full #

linear #

mirror #

none #

pulse #

reverse #

sinusoidal #

spring #

swingFrom #

swingFromTo #

swingTo #

webkitCubic #

webkitEaseInOut #

wobble #