Actions - ActionLabs/Scrollster GitHub Wiki

There are currently 7 actions available in Scrollster.

The general layout of an action is this:

{
    actor: 'Demo Actor', // (String) Which actor this action applies to
    start: 600, // (Positive Integer) How far along the scroll to start applying this action
    stop: 1000, // (Positive Integer) How far along the scroll to stop applying this action
    setBreak: true, // (boolean, optional) When set and truthy, sets a keyboard breakpoint at the stop of this action.
    type: 'moveTo', // (String) The type of action. (moveTo makes the option move from where it is to the specified location)
    properties: {
        location: [720, 450], // (Array of 2 items that can be numbers or strings)The destination in pixels
        curve: 'easeOutBounce' // (String) A curve to apply (whether the item goes there directly or changes speed as it goes)
    }
},

Position Action

Type: 'position' Available Properties:

  • scaleX: (Float) the distance along the x axis to move the actor for each tick of the scroll
  • scaleY: (Float) the distance along the y axis to move the actor for each tick of the scroll. Note negative values move down the screen, positive values move up. If you want the actor to move up the screen the way content usually does by default, set this value to 1.

Setting a value to 0 will prevent the actor from moving in that direction.

Move To Action

Type: 'moveTo' Available Properties:

  • location: (Array with a pair of integers or strings) e.g. ['50%', '50%'] or [100, 200]. Represents the x and y position to move an actor to over the duration of the scroll. The center of the actor will be positioned at this point when the action is complete. If you specify a value as a string ending in a % sign, then it will be interpreted as a percentage of the screen size. If you specify a value as an integer, it will be interpreted as a number of screen pixels.
  • curve: (Optional, String) See information about curves below.

Opacity Action

Type: 'opacity' Available Properties:

  • finalOpacity: (Optional, Float) A value between 0 and 1 inclusive indicating what the actor's opacity should be at the end of the scroll range. 0 is complete transparent and 1 is completed opaque. If this value isn't specified, 1 is assumed.
  • curve: (Optional, String) See information about curves below.

Rotate Action

Type: 'rotate' Available Properties:

  • axis: (String) Valid values are 'x', 'y', or 'z' which indicate the axis about which to rotate the actor. The axis is placed at the middle of the actor.
  • 'scale: (Float) The higher the value the faster the rotation will occur in relation to the change in scroll value. Positive values move rotate clockwise, negative values rotate counter-clockwise.

Rotate To Action

Type: 'rotateTo' Available Properties:

  • axis: (String) Valid values are 'x', 'y', or 'z' which indicate the axis about which to rotate the actor. The axis is placed at the middle of the actor.
  • angleInDegrees: (Float) The total number of agrees to rotate the actor over the scroll range. Positive values rotate clockwise and negative values rotate counter-clockwise.
  • curve: (Optional, String) See information about curves below.

Scale Action

Type: 'scale' Available Properties:

  • 'changeRatioX:' (Float) A value by which to scale the actor in the x direction. Positive values grow the actor, negative values shrink it.
  • 'changeRatioY:' (Float) A value by which to scale the actor in the y direction. Positive values grow the actor, negative values shrink it.
  • curve: (Optional, String) See information about curves below.

Skew Action

Type: 'skew' Available Properties:

  • scaleX: (Float, Optional) A value by which to scale the actor along the x axis. (This will not be obvious if the actor has not been rotated.) If not specified, this value is 0.
  • scaleY: (Float, Optional) A value by which to scale the actor along the y axis. If not specified, this value is 0.
  • scaleZ: (Float, Optional) A value by which to scale the actor along the z axis. If not specified, this value is 0.
  • curve: (Optional, String) See information about curves below.

Curves

Curves or easing curves are functions that modify the rate of change of an action over it's range. These can had live and realism to an animation. The curve functions are taken directly from the famous Easing and TweenTransition objects.

If no curve is specified, Scrollster applies a linear curve. This means that the rate of change for the duration of the action.

Curves from TweenTransition

  • linear: Rate of change remains constant.
  • easeIn: Action starts slowly and speeds up towards the end.
  • easeOut: Action starts quickly and slows down towards the end.
  • easeInOut: Action starts slowly builds faster and then slows again towards the end.
  • easeOutBounce: Action starts quickly and slows towards the end of the action, then recoils slightly before settling in to the final value.
  • spring: Action bounces quickly back and forth between the start and final values before settling in to the final value.

Curves from Easing

The behaviors of these curves are complicated. I recommend experimenting with them to see what they do. It can be a lot of fun.

  • inQuad
  • outQuad
  • inOutQuad
  • inCubic
  • outCubic
  • inOutCubic
  • inQuart
  • outQuart
  • inOutQuart
  • inQuint
  • outQuint
  • inOutQuint
  • inSine
  • outSine
  • inOutSine
  • inExpo
  • outExpo
  • inOutExpo
  • inCirc
  • outCirc
  • inOutCirc
  • inElasitc
  • outElastic
  • inOutElastic
  • inBack
  • outBack
  • inOutBack
  • inBounce
  • outBounce
  • inOutBounce