EverWeb can animate objects in three ways, all in Inspector > Shape Options: an effect when a visitor points at or clicks something, an animation that plays as an object comes into view, and effects that follow the visitor's scrolling, such as a menu that stays at the top. Used on a few objects, they draw the eye. Used everywhere, they slow the page and distract, so add them sparingly and test on a phone.
All three show only in Preview and on your published website, not in EverWeb's editing window.
Point and click effects (Mouse Transitions & Animations)
- Select the object: a picture, shape, button, text box or widget.
- In Inspector > Shape Options, open Mouse Transitions & Animations.
- In Mouse over animation, choose an effect, such as Pulsate, Float or Scale Up. It plays when the pointer moves over the object.
- In Mouse down animation, choose an effect to play when the object is clicked.
- Set Transition time (0 to 500) to smooth the change when you've given the object a different look in its Mouse Over or Mouse Down fill state. Higher numbers are slower.
Phones and tablets have no pointer, so visitors there may not see mouse-over effects. Don't put anything important only in a mouse-over state.
Make something appear as visitors scroll (Animation)
- Select the object. Select several to give them all the same effect.
- In Inspector > Shape Options, tick Animation.
- In the first menu choose Bounce, Fade, Flip, Rotate, Slide, Zoom or Other.
- In the second menu choose the direction, such as In Place or From Left. With Other, it lists more effects.
- Set Duration (how long it takes), Delay (how long before it starts) and Repeat (how many times it plays). The small preview box shows the result.
The animation plays when the object comes into view in the visitor's browser window.
Effects that follow scrolling (Scrolling Effects)
- Select the object. For a menu that stays at the top of the window, select the Container that holds the menu.
- In Inspector > Shape Options, open Scrolling Effects.
- In Activate at scroll location, say when it starts: a number (when the page has scrolled that many pixels), a + number such as +200 (when the object is 200 pixels from the top of the window), or a percentage such as 10%.
- In Behavior, choose None, Pin To Top, Pin Stack, Pin Push, Pin To Bottom, Pin To Left or Pin To Right. Spacing sets the gap, in pixels, from that edge.
- In the effects list, tick Blur, Change Color, Fade, Rotate, Remove, Scale or Scroll Speed, and set its value. You can combine them.
- Tick Reverse action on scroll up to undo the effect when the visitor scrolls back up.
For a background picture that moves more slowly than the page, set the image to Full width and tick Parallax scrolling under Fill in Shape Options.
Keep it light
- Pick one or two kinds of effect per page, for headings, key pictures or buttons.
- Large pictures with parallax take time to load, and the page can shift until they have. Use pictures saved at web size.
- Check on a real phone before you publish: click Preview, choose Preview QR Code and scan it with your phone. Then check the published page in a private window.
Common problems
| What you see | What to do |
|---|---|
| Nothing moves in EverWeb | That's expected. Use Preview |
| An object is missing on an iPhone, or the page looks broken on a phone | Untick Animation on that object and preview again. If that fixes it, use a simpler effect, such as Fade, or none |
| Fading the menu fades the whole width of the page | The effect applies to the whole object, and a Navigation Bar is full width. Apply it to a smaller object instead |
| A link to a section stops in the wrong place | Pictures with parallax or animations are still loading and moving the page. Use fewer of them on that page |
| A pinned menu covers the top of your content | Change Activate at scroll location or Spacing, then preview again |
Related articles
- My website looks fine on my computer but is cut off or jumbled on my phone
- Build a responsive page with Containers so it stacks neatly on a phone
- How do I open a popup window or enlarge a photo when someone clicks?
- How to link to another page, a website, an email address, a phone number, a PDF, or a section of a page