Skip to content

Creating New Scroll Animations

Guy Sopher edited this page Jan 25, 2023 · 24 revisions

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?