Animations and Motion Effects

Overview

Motion adds polish and draws attention to the right things. StretchPages supports four kinds of motion on any element — entrance animations, hover effects, sticky positioning, and parallax — and lets you tune each per breakpoint so motion feels right on desktop and calmer on mobile.

The four motion types

• Entrance — how an element animates in as it appears (for example, fade or slide in on scroll).
• Hover — how an element responds to the cursor (for example, lift or scale on hover).
• Sticky — makes an element stick in place as the visitor scrolls (great for headers and CTAs).
• Parallax — moves an element at a different speed than the scroll for a depth effect (great for backgrounds).

Add motion to an element

1. Select the element you want to animate.
2. Open its motion settings in the inspector.
3. Choose the motion type — entrance, hover, sticky, or parallax — and configure it.
4. Preview the effect on the canvas, and on the published page for scroll-based effects like entrance and parallax.

Tune motion per breakpoint

Motion can be set differently for desktop, tablet, and mobile:

1. Switch the canvas to the breakpoint you want (for example, mobile).
2. Adjust or disable the element's motion for that breakpoint.
3. This is useful for turning off heavy effects like parallax on mobile while keeping them on desktop.

Example: a lively but tasteful hero

Your hero headline fades and slides up on entrance so it feels alive when the page loads. The primary button lifts slightly on hover to invite clicks. The header bar is sticky, so navigation stays available as visitors scroll. The hero's background image has a subtle parallax on desktop — but you switch to mobile and disable parallax there, since it can feel jittery on phones.

Tips

• Less is more. One or two intentional effects read as premium; motion on everything reads as busy.
• Use sticky for navigation and key CTAs so the next step is always reachable.
• Reserve parallax for backgrounds and disable it on mobile, where it can feel unstable.
• Hover effects don't apply on touch devices, so don't rely on hover to reveal essential content.
• Preview on the live page — entrance and parallax are scroll-driven and are best judged on the published page.

Troubleshooting

My entrance animation doesn't play. Entrance effects trigger as the element scrolls into view — check the published or previewed page rather than a static canvas, and make sure the element isn't already fully on-screen at load.

Parallax looks choppy on mobile. Disable parallax at the mobile breakpoint; it's a desktop-friendly effect.

Hover effects don't work on my phone. That's expected — touch devices have no hover state. Use entrance or tap interactions instead for mobile.

My sticky element overlaps content. Give the sticky element a solid background and check spacing so it doesn't cover the content beneath it as it sticks.

FAQ

Can different breakpoints have different motion? Yes — motion supports per-breakpoint settings, so you can dial effects down (or off) on smaller screens.

Will motion slow my page down? Keep effects purposeful and avoid stacking many heavy animations; a few well-placed effects perform well and look best.