Shaped edges, backgrounds and animation on scroll
Give each section its own background: colour, gradient, glow, picture or video. Draw its edges as a wave, slope, curve or torn paper, and choose how it appears on scroll. Visitors who turned motion off on their device see a still page.
PLANSEvery plan
The problem it solves
- Every section is a flat box stacked on the next, and the site looks like every other template.
- Adding a wave between two sections means asking a designer for an image and hoping it lines up on phones.
- Animation added by hand makes the page jumpy and slow, and some visitors get dizzy.
- A photo behind a title makes the words unreadable.
How it works
- Click a section in the editor and open Look in the right panel. Choose the background and, for a picture or video, how dark it is and what stays in view.
- Open Shaped edges and pick the top and bottom edge. Give the two neighbouring sections different backgrounds to see it.
- Open Animation and choose how the section appears when it scrolls into view. Set whether items appear one by one, and what happens when the mouse is over cards.
- Press Play it on the page to watch it, or the play button in the top bar for the whole page.
- For the whole site, set Animation (still, gentle or lively) in the Design tab, and smooth scrolling and a progress line in the Site tab.
Everything it does
Backgrounds
- Plain, soft, accent, dark, your own colour (text turns light or dark by itself), gradient (two colours and a direction), glow, picture or video
- Picture: keep in view the middle, top or bottom; movement still, slower (parallax) or slow zoom
- Picture or video: darken none, a little, medium or a lot, and a tint colour
- Video: a link to an .mp4 file that plays muted on repeat; the picture shows until it loads and for visitors who turned motion off
- Pattern: dots, grid, lines or diagonal; floating shapes: dots, rings, soft blobs, crosses, big circles, squiggles or confetti
- Picture shape (square, very rounded, circle, arch, soft blob, tilted) and picture colour (black and white, warm, cool, faded, darker)
- A huge faded word behind the section, a giant number on the top edge, and a small label up the page margin
Shaped edges
- 37 shapes for the top and bottom edge, such as wave, layered waves, curve, slant, zigzag and mountains. Others include clouds, scallops, torn paper, city skyline, grass, brush stroke and soft blob
- Edge height small, medium or large; mirror the edges
- Edges move gently, like waves, if you turn it on
- Pull up over the section above, for overlapping cards
Animation
- When it scrolls into view: as the design says, none, rise, fade, zoom, from the left or from the right. Or blur in, tilt up, or pictures uncover like a curtain
- Items appear one after another
- Mouse over cards and pictures: nothing, lift up, picture zooms, glow or tilt
- One text or button can have its own entrance: rises, fades, grows, slides in, or never moves
- Whole site: still, gentle or lively; background texture film grain, soft glow or colour mesh
- Site tab: smooth scrolling, a progress line at the top, a back-to-top button and buttons that lean toward the mouse
- Motion presets Still, Calm, Cinematic and Bold set several of these at once
Care for visitors
- Visitors who turned motion off on their device see no animation, no background video and no moving edges
- Text over pictures gets a darkening layer you control, so it stays readable
Who uses it
Website EditorSets backgrounds, edges and animation per section, and the site-wide motion.
Website ManagerPublishes the page.
VisitorSees the motion, or a still page if motion is off on their device.
Where you use it
- Web: the editor, a section's Look, Shaped edges and Animation panels; Design tab and Site tab for the whole site
- Not in the editor while you type: animation plays when you press play, so the page stays still while you edit
What you control
Settings
- Background: as the section kind and design set it
- Edges: none to start with, unless the design has them
- When it scrolls into view: As the design says
- Whole-site animation: Gentle to start with in most colour sets
Questions
Will animation slow my site down?
Section animation starts only when a section scrolls into view. Run Check in the editor to see the page's speed score.What do visitors who get motion sick see?
If they turned motion off on their phone or computer, the site shows no animation, no moving edges and no background video. The page reads as plain blocks.Can I use a video as a background?
Yes. Give a link to an .mp4 file. It plays muted on repeat, with your picture shown until it loads.Do I need the Scale plan for scroll effects?
No. Backgrounds, edges, animation, motion presets and the scroll story sections are on every plan. Scale adds uploading scroll films and 3D models.Related features
BRANDS AND LARGER SHOPSMotion presets for the whole siteOne click sets how your whole site moves: Still, Calm, Cinematic or Bold. A preset sets the animation, the background texture and the scrolling options together, and you fine-tune each part afterwards.BRANDS AND LARGER SHOPSScroll stories: pinned, sideways, zoom and giant wordsSections that move with the scroll. A story stays pinned while its pictures change, the page moves sideways, a picture zooms open, giant words slide behind your product. They come with every plan.BUILDING THE SITEColour sets and fonts for the whole siteChange the colours and fonts of the whole site in one go. Pick one of 24 colour sets and 21 font pairs, change any colour, and set how titles, buttons and cards look. The editor warns when colours are too alike to read, and the site keeps text readable by itself.BUILDING THE SITEStyle any heading or button on its ownThe design sets how every heading and button looks, so the site stays consistent. When one needs to stand out, such as a bigger price or an outline button, style just that one from the text toolbar. One click takes it back.BUILDING THE SITEDrag-and-drop editor: type on the page itselfYou change your website on the page as visitors will see it. Click a heading and type, drag sections into order, and pick layouts from live pictures with your own words. Everything saves by itself, and nothing goes live until a manager publishes.BUILDING THE SITEPage check for speed and accessibilityOne button in the editor checks the open page for what makes it hard to use or slow. It scores the page out of 100 and says how to fix each point.
See your business on a real design.
Tell us what you do and what the site needs to do: bring enquiries, take bookings, show your work or sell. We will start your site from the closest design with you.