Choosing Presets

Some presets subtly enhance a site’s design, while others stand out as a primary feature. There are two main types: Animation, for continuous motion, and Transition, for single-entry effects.

Types of Presets:

Animation

Continuously animating

Fade in
Fade out
Fade in-out

Fly in
Fly out
Fly in-out

Helix
Conveyor
Rebound

Transition

Animates only on entry

Fade up
Scale up
Twist up

Loose hinge

Blur in
Color in

Tuning Presets

Each preset can be intensified or softened with the Intensity setting: 1, 2, or 3.

For more in-depth tweaking, use "</>" to access the CSS Snippet.

Each preset is powered by a set of @keyframes to be rewritten as you see fit. Use properties designed for animation like transform and filter, rather than layout properties like height.

@keyframes scrollAnimationHelix-3 {
     0%   { transform: perspective(2000px) rotateY(90deg) rotateZ(3deg); }
    100% { transform: perspective(2000px) rotateY(-90deg) rotateZ(-3deg); }
}

To change the transform-origin, incorporate it into your animation like this:

@keyframes scrollAnimationHelix-3 { 
    0%   { transform-origin: top left; [...other properties] }
    100% { transform-origin: top left; [...other properties] }
}

Two variables determine the animation type and timing curve (cubic-bezier):

media-item {
   --scroll-animation-mode: animation; // or 'transition'
   --scroll-animation-timing: linear; // try 'ease' or 'cubic-bezier()'
}

Note that custom keyframes and variables are overwritten once a new preset or intensity is selected.

Disable on Specific Images

To disable Scroll Animation for any particular image, right-click the image and select “Disable Scroll Animation”.

Right-click on image → Disable Scroll Animation