Creating New Scroll Animations

Advanced Scroll Animations

This feature allows you to create new and innovative scroll animations by combining several animations into one.

Demo Playground Here!

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: 'SKEW',
    fromValue: 10,
    toValue: 0,
    fromAnchor: 'ENTRY',
    toAnchor: 'ENTRY',
    fromPosition: 100,
    toPosition: 200,
    iterations: 10,
    transitionDuration: 400,
    direction: 'LEFT',
    hinge: 'center',
    ease: 'easeInOutBack'
  },
  {
    type: 'FADE',
    fromValue: 0,
    toValue: 1,
    fromAnchor: 'ENTRY',
    toAnchor: 'ENTRY',
    fromPosition: 0,
    toPosition: 0,
    iterations: 1,
    transitionDuration: 1000,
    randomOffset: 100,
  }
]

Demo Playground Here Too!

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
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
fromAnchor	The window anchor from which to measure the animation START position	EXIT, ENTRY
toAnchor	The window anchor from which to measure the animation END position	EXIT, ENTRY
fromPosition	The distance from the fromAnchor to START the animation	Number of pixels (can be negative)
toPosition	The distance from the toAnchor to END the animation	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
randomOffset	Adds a random offset between 0 and the specified number to each image separately	Number of pixels
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)
ease	use linear or ease transition between steps	one of the CSS easing functions
hinge (when optional)	The rotation pin point for rotation animation	center, top left, top right, bottom left, bottom right
direction (when optional)	The direction of the animation transition. The direction can be absolute (e.g. UP), or relative to the scroll direction (e.g.IN	Absolute directions: UP, DOWN, LEFT, RIGHT; Relative directions: IN, OUT, RIGHTWAY, LEFTWAY

Value Ranges of Different Animations

Animation Type	Animated Element	Animated Css Property	Value Ranges	Recommended Range	Additional Properties	Notes
FADE	item-wrapper	opacity	0: transparent -> 1: opaque	0 - 1
GRAYSCALE	item-content	filter	100: black & white -> 0: colored	100 - 0
SHADOW	item-container	filter	0: no shadow -> x: size of shadow in pixels	0 - 30		The shadow color is always black with 50% opacity
SIZE	item-wrapper	transform	1: original size -> 0.9: 90% of size -> 1.1: 110% of size etc.	0.95 - 1.1		This animation expands / shrinks the container. 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
ZOOM	item-content	transform	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	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
ROUND	item-wrapper	border-radius	0: no rounding -> 50%: full circle	0 - 50
ONE_COLOR	item-content	opacity	1: no color => 0: one color only	0 - 1
MAIN_COLOR	item-content	opacity	1: no color => 0: main color only	0 - 1
ROTATE	item-container	transform	0: no rotation -> -10: rotation of 10 degrees counter-clockwise -> 10: rotation of 10 degrees clockwise etc.	0 - 90	hinge	This animation rotates the entire container around the hinge parameter
SPIRAL	item-content	transform	0: no rotation -> -10: rotation of 10 degrees counter-clockwise -> 10: rotation of 10 degrees clockwise etc.	0 - 90	hinge	This animation rotates only the content of the image around the hinge parameter
SQUEEZE	item-content	transform	1: no squeeze -> 0.1: 10% of size	0 - 1	direction
FLIP	item-wrapper	transform	0: no flip -> 90: fully perpendicular	0 - 90	direction
SLIDE	item-wrapper	transform	0: no slide -> x: distance of x pixels	0 - 500	direction	This animations moves the entire image container
APPEAR	item-content	transform	0: no change -> x: distance of x pixels	0 - 500	direction	This animations moves the image inside the container
PAN	item-content	transform	1.1: image grows by 10% and moves to its edge	1.0 - 2.0	direction	This animation both scales up the image and pans it with the scroll. In this animation the toValue has no effect, set only the fromValue.
SKEW	item-content.	transform	0: no change -> x: skew of x degrees	0 - 30	hinge, direction	This animation will skew the image inside the container around the specified hinge

Have You Checked Out the Demo Playground Yet?