What animations can bernard add?

You can watch every one of them move in the animation gallery. The same gallery is the Effects tab in the workshop, next to Image gallery. There, each animation has a Try it on this page button that asks bernard to put it on the page you are working on. Animations from the library work on every bernard site.

Appear as you scroll

• Fade up. A section rises gently into place as visitors scroll to it. Good for: cards, quotes and sections further down a page. Ask: “Make the sections on this page fade up as people scroll to them.”
• Slide in from the side. A picture and its words slide in from opposite sides. Good for: a photo next to a short description. Ask: “Make the photo and its words slide in from the sides.”
• One after another. Items in a grid or list appear one by one. Good for: a grid of services, products or logos. Ask: “Make the items in this grid appear one after another.”
• Picture reveal. A photo uncovers itself like a curtain opening. Good for: a main photo or a picture in a story. Ask: “Make this photo reveal itself as people reach it.”

Bring words to life

• Typewriter headline. A headline types itself out. Good for: one short headline near the top of a page. Ask: “Make this headline type itself out.”
• Word by word. A sentence arrives one word at a time. Good for: a short line of plain words, such as a promise or a motto. Ask: “Make this sentence appear word by word.”
• Shimmer text. A soft gleam passes across a short line. Good for: a short line you want noticed, such as a sale or an opening. Ask: “Give this line a soft shimmer.”
• Rotating words. One word in a sentence changes every few seconds. Good for: showing the different people or things you serve. Ask: “Make the last word of this heading change between a few words.”
• Highlighter. A marker sweeps behind the words that matter. Good for: two or three key words in a sentence. Ask: “Highlight these words with a marker sweep.”
• Draw a line or signature. A line or a signature draws itself in. Good for: a signature under a letter, or an underline under a heading. Ask: “Make my signature draw itself in.”

Draw the eye

• Button shine. A gleam crosses a button on hover or tap. Good for: your main button, such as Book or Buy. Ask: “Add a shine to the main button.”
• Gentle pulse. A soft ring breathes three times around a button, then stops. Good for: one button per page that matters most. Ask: “Make the main button pulse gently when people reach it.”
• Tilt card. A card leans toward the pointer. On phones it stays still. Good for: feature cards or product cards. Ask: “Make these cards tilt toward the pointer.”
• Underline that draws in. Links grow an underline on hover or keyboard focus. Good for: a row of links, such as a menu or a footer. Ask: “Make the links in this menu draw an underline on hover.”
• Flip card. A card turns over on a tap to show its back. Good for: a question and its answer, or a product and its price. Ask: “Make a card that turns over to show the answer.”

Show it moving

• Numbers count up. Numbers count up from zero when they come into view. Good for: your numbers: years in business, customers served, five-star reviews. Ask: “Make the numbers on this page count up.”
• Moving strip. A row of items glides past, and stops when someone points at it. Good for: client names, places you work, or short reviews. Ask: “Turn this row of names into a moving strip.”
• Before and after. Visitors drag a handle to compare two pictures. Good for: a room before and after, or a photo before and after editing. Ask: “Make a before and after slider with these two photos.”
• Slow parallax. A background moves more slowly than the page as visitors scroll. Good for: a wide photo behind a short line of words. Ask: “Give this banner a slow parallax background.”
• Slow zoom on photos. A photo drifts slowly closer while it is on screen. Good for: a main photo with no words on it. Ask: “Make this photo zoom in slowly.”
• Bars and rings fill in. Bars and rings fill up to their number when they come into view. Good for: results, skills or how full a course is. Ask: “Make these bars fill in when people reach them.”

Tell a story

• Countdown to a date. Days, hours and minutes count down to a date. Good for: a launch, a sale ending, or the next event. Ask: “Add a countdown to the date of my next event.”
• Sticky scroll story. A picture holds still while the steps of a story scroll past. Good for: how you work, in three to five steps. Ask: “Turn these steps into a scrolling story.”
• Reading progress bar. A thin bar fills as visitors read. Good for: long articles and guides. Ask: “Add a reading progress bar to this article.”

Not sure which one? Ask bernard to “find an animation that suits this page”. It reads the page and suggests up to three, each tied to something already there. For something that is not on this list, see Can bernard make an animation that is not in the library?.