Do animations work on phones?
Most of your visitors are probably on a phone, so every animation in bernard’s library has to work there. bernard’s own tests try each one at phone size with a touch screen, in a real browser, and check that nothing makes the page scroll sideways.
The prompt
“Show me how the animations on my [which page] page behave on a phone, and tell me if any of them should change.”
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).
Effects made for a mouse
A few effects react to a mouse pointer. On a phone, they do something sensible instead:
- Button shine plays its gleam when the button is tapped.
- Tilt card stays still and looks like an ordinary card.
- Underline that draws in shows on hover or keyboard focus, so on a phone the links simply look as they always do.
- Flip card turns over on a tap, the same as a click.
Everything else, such as numbers that count up or sections that appear as people scroll, works the same on a phone as on a computer.
Checking it yourself
Open the preview of your draft on your own phone and scroll through the page. If an animation feels too busy on a small screen, ask bernard to take it off (see My animation is too much, or I want it off).
More about animations: How do I add an animation to my site?.
Questions people ask
- Why does my tilt card not move on my phone?
- On purpose. A tilt card leans toward a mouse pointer, and a phone has none, so on a touch screen it stays still and looks like a normal card.
- How do I see it on my phone before it goes live?
- Open the preview link of your draft on your phone. Nothing reaches your visitors until you approve the change by publishing.
- Does a phone set to less motion see them?
- No. It sees your page without the movement, the same as a computer set that way.