3.4Motion effects & animations
The essentials in 30 seconds
- Entrance animations: an element appears (fade, slide); scroll effects (Pro): it moves on scroll; hover: it reacts to the mouse.
- Guiding principle: "less is more" — animation enhances sparingly, it doesn't distract.
- Too many animations slow things down and hinder (performance, accessibility) — especially scroll/mouse.
Through-line — Nadia measures the effects
Tempted by animations, Nadia puts them everywhere: titles that fly in, parallax images, blinking buttons. The result: the page "moves" too much, feels slow and tires. She cleans up: a slight fade as the cards appear, a subtle effect on button hover. Clean and crisp.
Continues 3.3 — enhance without overloading.
1. Three families of effects
Entrance animations make an element appear with an effect (fade, slide, zoom) when it enters the screen. Scroll effects (Pro) make elements move on scroll (parallax, translation). Hover effects react to the mouse passing (color change, slight lift).
Well-measured, they add life and guide the eye (e.g. making the cards appear one by one).
2. Moderation, performance, accessibility
The guiding principle: "less is more". Animations enhance sparingly; in excess, they distract, give an impression of slowness and can hinder accessibility (some people are sensitive to motion). Scroll and mouse effects are the most costly.
Nadia's rule: an animation only if it serves reading; subtle; and checked on mobile (where animated scroll can lag).
🔎 Concrete example — Measuring the effects (Nadia's case)
Keep: slight fade as the cards appear (entrance).
Keep: slight lift of the buttons on hover.
Remove: parallax across the whole page (heavy).
Remove: titles that "fly in" and blinking buttons.
→ Check the fluidity on mobile.Result: a lively but clean and fluid site.
Lesson: "less is more".
Section vocabulary
- Entrance animations
- An element appears with an effect (fade, slide, zoom) as it enters the screen.
Simple example: the project cards appear with a fade.
What it is not: making every element fly and bounce.
Reflex: a subtle entrance guides the eye.
- Scroll effects (Pro)
- Elements that move on scroll (parallax, translation).
Simple example: a slight parallax on a single mood section.
What it is not: parallax everywhere (heavy, tiring).
Reflex: occasional animated scroll, never everywhere.
- Hover effects
- Change on the mouse passing (color, lift, shadow).
Simple example: button that lifts slightly on hover.
What it is not: blinking or abrupt changes.
Reflex: subtle, consistent hover, without excess.
- Moderation ('less is more')
- Enhance sparingly: the animation serves reading, doesn't distract.
Simple example: 1-2 subtle, useful effects.
What it is not: stacking animations "to look modern".
Reflex: when in doubt, remove the animation.
- Performance & accessibility
- Too many animations slow things down and hinder (motion sensitivity).
Simple example: check the fluidity on mobile before delivering.
What it is not: judging it fluid on a powerful computer only.
Reflex: test the effects on a real mobile.
In practice — Measuring the animations
- Add a subtle entrance animation (fade) to a group of cards.
- Add a subtle hover effect on the buttons (lift/color).
- Avoid generalized parallax; reserve it for a strong section, if truly useful.
- Test the fluidity on a real mobile and remove whatever lags or distracts.
Ready-to-say script — justifying restrained effects (20 s)
"I added a few subtle animations — the projects appear gently, the buttons react on hover. I deliberately avoid overly heavy effects: they slow the site and tire the visitor. The goal is a lively but fast and pleasant site, especially on mobile."
Position restraint as a choice of performance and comfort.
Copy-paste template — animations check
ENTRANCE ANIMATION (subtle): _______________
HOVER EFFECT (subtle): _______________
PARALLAX / SCROLL: none / 1 strong section
EFFECTS REMOVED (excess): _______________
FLUIDITY TESTED ON MOBILE: yes / noClean showcase
A fade on appearance, a subtle hover: amply enough.
Impact section
A single parallax on the banner, if performance allows.
Mobile
Lighten scroll effects, often heavy on a small screen.
Accessibility
Stay subtle: some people are sensitive to animations.
✓ Best practices
- Apply "less is more".
- Reserve parallax for one section, not the whole page.
- Test the fluidity on mobile.
✗ Common pitfalls
- Stacking animations "to look modern".
- Generalized parallax (heavy).
- Judging it fluid only on a good computer.
Key takeaways
- Entrance (appearance), scroll (Pro), hover.
- "Less is more": subtle and useful.
- Excess slows down and hinders accessibility.
- Test the effects on a real mobile.
48h challenge — apply tomorrow
Add an entrance fade to some cards and a subtle hover to the buttons, remove any generalized parallax, then check the fluidity on a real mobile. Note what you removed. 20 minutes.
- I add subtle, useful animations.
- I avoid generalized parallax.
- I test the fluidity on mobile.
Frequently asked questions
Do animations slow the site down?
They can, especially scroll (parallax) and mouse effects, particularly on mobile. Hence the "less is more" principle and testing on a real phone.
Which animation to favor to start?
A subtle entrance animation (fade) and a subtle hover effect on the buttons are enough to add life without overloading.
Do animations pose an accessibility problem?
Excess motion can hinder sensitive people. Stay subtle and avoid aggressive or permanent effects.
Nadia put animations everywhere and the page feels slow and busy. What principle to apply?