Creating New Scroll Animations

Basic Usage

Scroll Animations are defined as an array of objects. Each object defines a separate animation that will act simultaneously as the users scrolls. The array should be set as the Advanced Scroll Animation property (behaviourParams_gallery_advancedScrollAnimation) that appears under Animations in the playground. Notice that the animation array must be a valid JS object, without trailing commas.

Sample Animation

{
    type: 'GRAYSCALE',
    fromValue: 100,
    toValue: 0,
    fromPosition: 200,
    toPosition: 200,
    direction: 'IN',
    iterations: 1,
    transitionDuration: 1400,
    reset: false
  },
  {
    type: 'FADE',
    fromValue: 0,
    toValue: 1,
    fromPosition: 100,
    toPosition: 100,
    direction: 'IN',
    iterations: 1,
    transitionDuration: 1400,
    reset: false
  }

Here is a Demo of this animation

Animation Properties

Property Name	Purpose	Allowed Values
Type	Animated Property	See available animation types below
direction	The direction of the animation, Entry animation or Exit animation or both	IN, OUT, BOTH
fromValue	The property value to START the animation with	Specific per each animation
toValue	The property value to END the animation with	Specific per each animation
fromPosition	The position to START the animation. For IN direction it is the distance from the bottom of the screen. for OUT direction it is the distance from the top of the screen	Number of pixels (can be negative)
toPosition	The position to END the animation. For IN direction it is the distance from the bottom of the screen. for OUT direction it is the distance from the top of the screen	Number of pixels (can be negative)
iterations	The number of steps that the animation will span over. e.g. 1 iteration means that the item will transition from the fromValue to the toValue once it reaches the position, 10 iterations mean it will transition gradually in 10 sections that span over the range between fromPosition and toPosition	Any integer between 1 and 10
transitionDuration	The duration in milliseconds of the animated transition between steps. The bigger the number, the "slower" the animation will appear	Any number between 100 and above (recommended 400)
reset	A boolean that when set as true will animate only as the user scroll. Once the scroll stops, all gallery items will return to their unanimated appearance	true or false

Value Ranges of Different Animations

Animation Type	Animated Css Properties	Value Ranges
FADE	opacity	0: transparent -> 1: opaque
GRAYSCALE	filter: grayscale	100: black & white -> 0: colored