Frontend
Motion design
UX
~5 λεπτά
Όλοι μιλάνε για motion design, αλλά ο όρος σημαίνει δύο διαφορετικά πράγματα. Για ένα site, αυτό που μετράει είναι πώς κινούνται τα στοιχεία της σελίδας, και πώς η κίνηση βοηθάει τον χρήστη να καταλάβει τι συμβαίνει.
Τα δύο είδη motion design
Βίντεο / γραφικά
Animated logos, intros, ads, explainer videos. Φτιάχνεται με After Effects ή AI εργαλεία όπως το Higgsfield.
Αφορά τη σελίδα; Μόνο αν μπουν βίντεο μέσα.
UI / web
Πώς κινούνται τα στοιχεία της σελίδας: hover, scroll, transitions, interactive demos. Φτιάχνεται με CSS, Flatsome animations και GSAP.
Αφορά τη σελίδα; Ναι, άμεσα.
Τύποι UI motion
Η ετικέτα σε κάθε κάρτα δείχνει αν το βλέπεις ήδη σε αυτό το site.
Micro-interactions
✓ Σε αυτό το site
Copy button που γίνεται “Copied ✓”, hover σε κάρτες.
CSS + μικρό JS
Scroll animations
✓ Σε αυτό το site
Κάρτες που εμφανίζονται με fade-up η μία μετά την άλλη, όπως αυτές εδώ.
Flatsome scroll animation
Transitions
✓ Σε αυτό το site
Ομαλή αλλαγή χρωμάτων και μεγέθους στο hover. Δοκίμασε να περάσεις το ποντίκι πάνω από αυτή την κάρτα.
Flatsome states / CSS transitions
Feedback
◐ Μερικώς
Accordion που ανοίγει ομαλά, like button με “έκρηξη”.
Flatsome accordion · GSAP για πιο σύνθετα
Page transitions
Επόμενο
Ομαλή μετάβαση από σελίδα σε σελίδα.
View Transitions API / GSAP
Interactive demos
Επόμενο
Animations που εξηγούν μια έννοια, π.χ. πώς δουλεύει το flexbox.
GSAP ή React islands σε HTML block
Αρχές για καλό UI motion
Κάθε κίνηση εξηγεί κάτι (“είναι clickable”, “αντιγράφηκε”), δεν υπάρχει μόνο για εντυπωσιασμό. Κανόνας: αν δεν απαντά σε ένα “γιατί;”, βγάλτο.
Πιο αργά φαίνεται βαρύ, πιο γρήγορα δεν γίνεται αντιληπτό. Κανόνας: 150–300ms για UI.
Φυσικές καμπύλες αντί για γραμμική κίνηση. Τα springs δίνουν την “παιχνιδιάρικη” αίσθηση. Κανόνας: ease-out ή spring, ποτέ linear.
transition: transform 200ms cubic-bezier(0.33, 1, 0.68, 1);Όσοι έχουν ενεργό το “reduce motion” στο σύστημά τους δεν πρέπει να βλέπουν animations. Κανόνας: πάντα ένα fallback με prefers-reduced-motion.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Σε knowledge base
Ο χρήστης θέλει να βρει γρήγορα την πληροφορία. Το motion μετράει κυρίως σε micro-interactions και σε interactive demos που βοηθούν την κατανόηση. Λίγα και στοχευμένα.