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
  }

Animation Properties

Property Name	Purpose	Allowed Values
Type	Animated Property	'FADE', 'GRAYSCALE'
fromValue
toValue
fromPosition
toPosition
direction
iterations
transitionDuration
reset

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