How do I add an animation to my site?
bernard has a library of 24 animations, sorted by what you want them to do: things that appear as people scroll, words that come to life, touches that draw the eye, numbers and photos that move, and ways to tell a story. See them all, with what each one is good for, in What animations can bernard add?.
The prompt
“Add an animation to my [which page] page: [what should move, e.g. make the numbers count up].”
Signed in, Get my prompt fills in your site for you. Otherwise press Copy and fill in the [bracketed] parts. First time? Connect your AI to bernard once: Use your own AI (opens in a new tab).
How it works
- Tell bernard what you want, in your own words: “make the numbers on my home page count up”, or “something to make my headline stand out”. If you are not sure, ask “find an animation that suits this page” and bernard suggests up to three, each tied to something already on the page.
- bernard picks the right animation, uses your site’s main colours where it can find them, and puts it on your page in the draft.
- Open the preview and watch it. If you like it, publish it like any change.
Every animation in the library is checked in a real browser by bernard’s own tests. See Is it safe to let bernard add code to my site?.
Good to know
- Your words still read without it. Every animation starts from your own words and pictures. If a visitor’s browser never runs it, the page reads normally.
- Some visitors see a still version. People can ask their phone or computer for less motion. bernard respects that, so they see your page without the movement. See Why do my animations not move for some visitors?.
- Phones are included. See Do animations work on phones?.
- Your page stays quick. See Will animation slow my site down?.
- A countdown needs a date and a time zone. Tell bernard the date and where it happens (“10am London time”). Keep the date in words on the page as well, so the page is right even without the countdown.
- A rotating word shows its first word to search engines. Put the word that matters most first: “We make mugs / bowls / vases” is found for mugs.
- Typewriter and word-by-word headlines work on plain words only. A line with a link inside it needs a different animation.
The ones people ask for most
- Numbers that count up: Make the numbers on my site count up.
- Sections that appear as people scroll: Make things appear as people scroll down my page.
When the library does not have it
Describe what you want. bernard can write a new animation for you, checked against the same rules. See Can bernard make an animation that is not in the library?.
Too much movement?
Ask bernard to “calm my site down”. See My animation is too much, or I want it off.
Questions people ask
- Will it use my colours?
- bernard uses your site’s main colours where it can find them: from your style, or from your pages if you have not set one. If it finds none, the animation uses plain colours of its own. You never pick a colour from a list.
- Can I see it before anyone else does?
- Yes. It goes into your draft first. Open the preview, watch it move, and publish only when you like it. The publish is your approval: nothing reaches your visitors before it.
- What if I change my mind?
- Ask bernard to take it off, or undo it like any other change, then publish. Your words and pictures stay where they were.
- Can a part of the page have two animations?
- No. One animation per part of the page. Asking for a second one on the same part replaces the first.
- How many should I add?
- Two or three on a page is plenty. One moving thing draws the eye; ten moving things fight for it.
- Is this on for everyone?
- Yes. Animations from the library work on every bernard site and are included in every plan. Taking animations off works for everyone too. A new animation written just for you is a different thing: that is switched on for some accounts so far.