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 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 Animations

Scroll Animations let 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) and on images within vertical marquees. If your site has no images, use the Demo Window to preview the effect.

Site Settings » Image Settings » Scroll Animations

Disable on Specific Images

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

Right-click on image » Disable Scroll Animation

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 transforms or filters) 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); }
}
Two variables determine the animation type and timing curve.

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

To change the transform origin, paste this code into your CSS Editor.

media-item::part(sizing-frame) {
transform-origin: top left !important;
}