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

Combining Animations

Animations can be combined to create a new effect, but not all animations can be combined. Animations that change the same property and the same element usually will not interact well.

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 Element | Animated Css Property | Value Ranges | Recommended Range | Additional Properties | Notes ---|---|---|---|---|--- FADE | opacity | item-wrapper | 0: transparent -> 1: opaque | 0 - 1 GRAYSCALE | item-content | filter: grayscale | 100: black & white -> 0: colored | 100 - 0 SIZE | item-wrapper | transform: scale | 1: original size -> 0.9: 90% of size -> 1.1: 110% of size etc. | 0.95 - 1.1 | | Since the animation is in percentage, bigger images will grow more than small images. Also, images might overlap one another in the spacing between them is too small SHADOW | item-container | filter: drop-shadow | 0: no shadow -> x: size of shadow in pixels | 0 - 30 | | The shadow color is always black with 50% opacity ZOOM | item-content | transform: scale | 1: original size -> 0.9: 90% of size -> 1.1: 110% of size etc. | 1 - 1.35 | | This animation expands the content of the item, but it remains inside its container BLUR | item-content | filter:blur | 0: no blur -> 100: blur of 100 pixels | 0 - 100 | | Usually, the edges of the blurry image looks weird, it is best to combine it with a zoom animation ROTATE | item-container | transform: rotate | 0 - 90 | 0: no rotation -> -10: rotation of 10 degrees counter-clockwise -> 10: rotation of 10 degrees clockwise etc. | hinge: center | top left | top right... | Adding a hinge parameter sets the rotation center at that point ROUND | item-wrapper | border-radius | 0: no rounding -> 50%: full circle | 0 - 50 |