Basics Overview Videos Rates & Services Managing your Sites Editing & Publishing Collaborating Account Settings Moving from Cargo 2 to 3
Site Building Site and Page Layout Pages and Sets Text Styles Adding Fonts Pinning Overlays Linking Tags Images Files Columns Galleries Thumbnail Index Marquee Clock Effects Page Options Commerce Audio & Video Backdrops Layering Effects Scroll Animation Quick View Mobile Site Menu Third-party embeds CSS and HTML Social Sharing & SEO Adding Google Analytics Browser Support Domains Buying a domain from Cargo Domains purchased elsewhere Using Subdomains DNS Editing Domain Configuration Service Setup Email with a Domain

Scroll Animation

Scroll Animation lets images respond to scrolling, through preset effects. To enable one, locate the menu within Image Settings and choose a preset. Once selected, animations will appear on all scrollable images (excluding Backdrops), including those inside Overlays with a Slide: ↑ Up or ↓ Down transition. If your site has no images, use the Demo Window to preview the effect.

Site Settings → Image Settings → Scroll Animations

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