Add animations and hover effects to your website without code
Pick an element, choose how it enters or loops and what starts it, and give buttons a hover state. Press play to watch it on the canvas before you publish.
Motion that waits for the visitor.
-
Starts when they get there
Layer In View holds an animation until the element scrolls into view, so each section arrives as it is reached.
-
A preset for every entrance
Fade, scale, flip or slide in from any side, or pick Custom and set the motion yourself.
10 presets
- Fade in
- Scale in
- Scale in bottom
- Flip horizontal
- Flip vertical
- Slide in top
- Slide in left
- Slide in right
- Slide in bottom
- Custom
-
Buttons that answer the pointer
Press + next to States to add Hover, then restyle the button for the moment the pointer lands on it.
Or set every keyframe yourself.
Choose Custom and decide where the element starts: how far away, how it is turned, how faded or blurred. It moves from there to where you drew it.
Custom
Pick it last in the Preset list and the keyframe rows open. On a Loop, you add them as steps.
X and Y
Where the element starts, up to 500 px away on either axis.
Rotate X, Y and Z
Turn it on any axis, up to 360 degrees, for a flip or a tilt.
Opacity, Scale and Blur
Start it faded, smaller or larger, or out of focus, and it settles into place.
Moving in three steps.
-
Select an element
Click an image, a heading or a button on the canvas, then press + next to Animations in the right panel.
-
Choose the motion
Pick Appear or Loop, a preset, a trigger and an easing, then set the speed and a delay.
-
Press play, then publish
Preview one element or several selected together, adjust the timing, and publish the page.
Frequently asked.
How do I add animations to a website without code?
Select the element on the canvas and add an animation in the right panel. Choose Appear or Loop, a preset such as Fade in or Slide in left, a trigger, an easing, a speed and a delay, then press play to preview it.
Can I animate elements on scroll?
Yes. Set the trigger to Layer In View and the animation waits until the element comes into view, so sections arrive as the visitor scrolls down.
How do I add a hover effect to a button?
Select the button, press + next to States to add Hover, and restyle it, its fill for a start. Default stays as you drew it.
Can several elements animate one after another?
Yes. Give each one a slightly longer Delay, then select them together and press play to check the timing as a sequence.
Do Figma prototype animations import into Siter.io?
No: prototype animations and interactions do not import. The Figma plugin brings the design across, and you add the motion in Siter.io with a preset or Custom.
Do animations need a paid plan?
No. You can set, preview and publish animations on any plan, Free included, where your website goes live at name.getsiter.com.
More of what the editor does
- Custom domains Point a domain you own at the site, with HTTPS issued automatically, in every paid plan at no extra cost.
- Hosting and SSL No separate host to buy, no certificate to renew. It is part of the plan.
- HTML download Take a copy of a page and host it elsewhere. On Pro, and honest about the limits.
- Forms Design a form on the canvas and get the answers in your inbox.
- Custom fonts Upload the font files the design was made with, on every plan including free.
- Responsive design A layout for each breakpoint, custom widths included, laid out by you rather than guessed by the tool.
- SEO settings Per-page title, description and slug, plus custom meta tags in the head.
- Teams and roles Admin and Member roles on paid plans, with editor seats included and counted per website.
- Website analytics See visitors and top pages for every published site, plus sources, countries and devices on paid plans, with no cookies and no personal data.
- File hosting Upload PDFs, documents, audio and video and link to them from any button, image or line of text.
- Version history Restore any page from the last 30 days, and bring back deleted pages and websites within 14.
- Visual editor A free-form canvas with layers, auto layout, components and hover states, closer to a design tool than a block builder.
- Popups Open a popup from any button with Open overlay, or link it to a page, a section, a file, an email or a phone call.
- Custom code Head code for the whole website or one page, and a Code element for embeds on the canvas.
- Images An image library for each website with folders and Unsplash search, plus an editor that crops, rotates and adjusts.
- Integrations Zapier for form responses, reCAPTCHA, Google Analytics, Facebook Pixel, video, fonts, Figma and any embed snippet.
Make it move where
it matters.
Set the motion on the canvas where you set everything else, and press play to see it before anyone else does.