Animation configuration

Property name:

keyframes

Type:

Object

Default:

{}

Determination:

Keyframes defines steps in the animation timeline that specifies the value of a CSS property ( also CSS custom property ) at a particular percentage of the scroll progress between the triggerStart and triggerEnd position. As you scroll, the animation interpolates between these keyframes to animate the property from one value to another, and then renders the updated property on the selected element(s).

Offset formats:

For the convinience you will be able to choose from 3 different type of formula to determine your offsetting. Number or percentage offsets can be applied until 6 decimal.

from/0/0% - A starting offset of 0%.

to/100/100% - An ending offset of 100%.

keyframes: {
    "cssPropertyName": {
        from: "css-porperty-value",  // or 0 or "0%"
        25: "css-porperty-value", // or "25%"
        to: "css-porperty-value" // or 100 or "100%"
    }
}

Always use camelCase convention for the CSS property names.

Important:

It is not required to set a starting offset (from/0/0%) for your CSS property name if you have already declared value for your CSS property externally, internally, or inline, ScrollMoo takes those values and adds them as a 0% offset, so your initial style value will not be changed and will not effect on your design. However, if you set a starting offset (from/0/0%), your declared value will be overwritten and set at the inline style.

If you want to animate element(s) with prepared properties without having declared value externally, internally, or inline, you can skip to set a starting offset (from/0/0%) because for CSS transform, CSS filter, and CSS backdrop-filter, ScrollMoo will set the proper default value for those properties. Custom CSS properties (variables) will always be set to 0 as a starting value.

See more prepared CSS properties

Property name:

markers

Type:

Boolean or Object

Default:

false

Determination:

Markers are visually helping during the developement to show the starting and ending positions of your animation. You can customize the style of markers by setting an object.

markers: true

markers: {
  backgroundColor: "gold",
  color: "pink",
  fontSize: "20px"
}

Property name:

markerId

Type:

String

Default:

""

Determination:

Adding a pre text to the markers. Helpful when you have a lot of elements to animate.

markerId: "add some text"

Property name:

sync

Type:

Number

Default:

0.35 second ( 350ms )

Determination:

Determine an amount of time in seconds that the animation should take to be syncronized from the last scroll position ( which was recorded at the previous frame ) to the current scrollbar's position during the scroll.

sync: 5

Important:

If you use both sync and duration together, sync will be ignored.

Property name:

duration

Type:

Number or Boolean

Default:

false

Determination:

Determine the total time, in seconds, that the animation should take from the triggerStart to the triggerEnd position during the scroll.

duration: 5

Important:

If you use both sync and duration together, sync will be ignored.

Property name:

ease

Type:

String

Default:

none

Determination:

Easing is another method for changing the timing of your animation, alongside sync. However, the primary reason for using is to provide a different structural flow and visual appearance for your animation.

List of ease:

none, linear, inQuad, outQuad, inOutQuad, inCubic, outCubic, inOutCubic, inQuart, outQuart, inOutQuart, inQuint, outQuint, inOutQuint, inSine, outSine, inOutSine, inExpo, outExpo, inOutExpo, inCirc, outCirc, inOutCirc, inBack, outBack, inOutBack, inElastic, outElastic, inOutElastic, inBounce, outBounce, inOutBounce

Visual cheatsheet

ease: "outQuad"

Note:

To leave ease on default as "none" will use "outQuad" to give a linear start and smooth end to your animation.

Property name:

triggerStartElement

Type:

String

Default:

The selected element(s) to animate.

Determination:

The triggerStartElement will determine where the animation should be triggered for the start. ScrollMoo can detect if the given triggerStartElement has a relation to the given animated selected element(s), which can be really useful when you have parent-child hierarchy of divs, otherwise ScrollMoo will find the first exsisting match in the DOM.

triggerStartElement: "selector text for the element"

Property name:

triggerEndElement

Type:

String

Default:

The selected element(s) to animate.

Determination:

The triggerEndElement will determine where the animation should be triggered for the end. ScrollMoo can detect if the given triggerEndElement has a relation to the given animated selected element(s), which can be really useful when you have parent-child hierarchy of divs, otherwise ScrollMoo will find the first exsisting match in the DOM.

triggerEndElement: "selector text for the element"

Property name:

tiggerStart

Type:

Number or String

Default:

0

Units:

% or px

Determination:

Increase or decrease the triggerStart position by the calculated top of the position of triggerStartElement. Given Number will calculate in %. Percentage unit will calculate by the height of the triggerStartElement.

triggerStart: 100 // will calculate in %

triggerStart: -100 // will calculate in % 

triggerStart: "100px"

triggerStart: "-100px"

triggerStart: "100%"

triggerStart: "-100%"

Property name:

triggerEnd

Type:

Number or String

Default:

0

Units:

% or px

Determination:

Increase or decrease the triggerEnd position from the calculated top of the position + outer height of triggerEndElement. Given Number will calculate in %. Percentage unit will calculate by the height of the triggerEndElement.

triggerEnd: 100 // will calculate in %

triggerEnd: -100 // will calculate in % 

triggerEnd: "100px"

triggerEnd: "-100px"

triggerEnd: "100%"

triggerEnd: "-100%"

Property name:

indicatorStart

Type:

Number or String

Default:

0

Units:

% or px

Determination:

The moment when indicatorStart reaches the triggerStart, it is mean that animation has to start. Increase or decrease the indicatorStart position from the top of the viewport. Number will calculate in % ( inner height of the window ), otherwise use a String with the accepted units.

indicatorStart: 100 // will calculate in %

indicatorStart: -100 // will calculate in % 

indicatorStart: "100px"

indicatorStart: "-100px"

indicatorStart: "100%"

indicatorStart: "-100%"

Property name:

indicatorEnd

Type:

Number or String

Default:

0

Units:

% or px

Determination:

The moment when indicatorEnd reaches the triggerEnd, it is mean that animation has to end. Increase or decrease the indicatorEnd position from the top of the viewport. Number will calculate in % ( inner height of the window ), otherwise use a String with the accepted units.

indicatorEnd: 100 // will calculate in %

indicatorEnd: -100 // will calculate in % 

indicatorEnd: "100px"

indicatorEnd: "-100px"

indicatorEnd: "100%"

indicatorEnd: "-100%"

Property name:

render3D

Type:

Boolean

Default:

false

Determination:

When you define transformation properties in the keyframes object, ScrollMoo applies optimizations to ensure the best performance during rendering. Enabling the render3D option means that all specified transformation properties will be composed into a matrix3d as an ouput of your inline style. If you are creating 3D animations, note that ScrollMoo does not perform additional optimizations on matrix3d transformations.

render3D: true

Important:

Set render3D to true only if the entire triggering section will be rendered in 3D. Otherwise, enabling it is not recommended. Composing matrix3d style to elements that use primarily 2D transformations does not improve performance. In fact, it may cause performance drops and inconsistent rendering, especially when applied on many elements.

Property name:

onEnter

Type:

Function

Determination:

A callback when triggerStart moves upward past indicatorStart as the page content scrolls up. The callback returns the interacted element(s) in an array.

onEnter: (elements) => console.log("onEnter", elements)

Property name:

onEnterReverse

Type:

Function

Determination:

A callback when triggerEnd moves downward past indicatorEnd as the page content scrolls down. The callback returns the interacted element(s) in an array.

onEnterReverse: (elements) => console.log("onEnterReverse", elements)

Property name:

onLeave

Type:

Function

Determination:

A callback when triggerEnd moves upward past indicatorEnd as the page content scrolls up. The callback returns the interacted element(s) in an array.

onLeave: (elements) => console.log("onLeave", elements)

Property name:

onLeaveReverse

Type:

Function

Determination:

A callback when triggerStart moves downward past indicatorStart as the page content scrolls down. The callback returns the interacted element(s) in an array.

onLeaveReverse: (elements) => console.log("onLeaveReverse", elements)

Property name:

onProgress

Type:

Function

Determination:

A callback that gets called every time ( scroll event fired ) when your indicator positions are interacting with your trigger positions. The callback returns the interacted element(s) in an array as a first argument, and the second returns the progress status from 0 to 1.

onProgress: (elements, progress) => console.log("onProgress", elements, progress)

Property name:

onAnimationComplete

Type:

Function

Determination:

A callback that gets called when the determined time of sync or duration has completed. The callback returns the interacted element(s) in an array.

onAnimationComplete: (elements) => console.log("onAnimationComplete", elements)

Property name:

onToggle

Type:

Function

Determination:

A callback that gets called when the indicators are interacting with the trigger positions. onToggle is a merged callback of the onEnter, onEnterReverse, onLeave, onLeaveReverse. The callback returns the interacted element(s) in an array as a first argument, and the second argument returns the "status of activity" in a boolean.

onToggle: (elements, isActive) => console.log("onToggle", elements, isActive)