Motion
Motion enlivens every interaction. It helps people recognize changes and move towards their goals, drastically improving user experience. Big software often lacks motion as it focuses more on functionality. Users spend hours on interfaces, bearing a lot of cognitive load. Good motion can bring a sense of humanity and delight to an experience while making it more sophisticated and satisfying.
“Motion tells stories. Everything in an app is a sequence, and motion is your guide. For every button clicked and screen transition, there is a story that follows.” - Craig Dehner
RDS believes that motion should be implemented throughout components, layouts, and page transitions. Adding animations to everything will definitely increase JS load and overall performance. There will be low/old spec devices, which will make things worse. So, depending upon the use cases of the application, we have to define where and when to use animation. There will be some screens that should render as fast as possible.
We’re using the framer-motion library for all our animations. There’s no need for CSS key frames. We will embrace Framer’s hooks, documentation, and APIs. It’s powerful enough for our needs and simple enough to build.
Motion Principles
Imagine your’re exploring a new city, not with a map but with a friendly local pointing you toward hidden gems. That’s the essence of our motion design: guiding user with subtle cues and delightful surprises. We believe in purposeful movement, not flashy distractions, where every animation serves a story.
Functional
Our motion design is far more than just eye candy. It's a strategic storyteller, whispering meaning and intent into every interaction. But this narrative unfolds seamlessly, ensuring that functionality always takes center stage. We believe motion exists to guide users on their journey, gently highlighting the next step, informing them of UI changes, and celebrating their achievements. It's like having a friendly companion on your digital adventure, pointing the way and cheering you on.
Consistent
Consistency is the magic thread that weaves your experience together. We believe in a shared design language, where motion echoes across products, fostering familiarity and trust. It's like stepping into a world where everything speaks the same language, each movement reinforcing RDS's unique approach to solving complex problems. It's not just about aesthetics; it's about building a foundation of understanding that strengthens and simplifies even the most challenging interactions.
Performant
Performance is the unsung hero of every animation. We prioritize smoothness and delight, crafting motion that enhances the experience without compromising speed. Server-side rendering takes the frontlines, minimizing client-side load, while tools like Framer Motion provide a playground of optimized possibilities. But remember, true performance mastery lies in the hands of our developers. By embracing proper documentation and strategic implementation, they can weave captivating animations that dance beautifully within the frame rate's embrace.
Simple
Simplicity reigns supreme. We believe in motion that whispers, not shouts. Clean transitions, minimal embellishments, and easy implementation guide our approach. Like the brushstrokes of a master artist, every intentional nuance adds depth and meaning without cluttering the canvas. This is the true art of motion design: expressing volumes with elegant restraint, leaving users with a sense of wonder and a smile on their face.
Think of these principles as your compass: Functional motion points the way, highlighting next steps and celebrating wins. Consistent motion keeps things familiar, like a comforting rhythm that eases you along. Performant motion keeps things swift and smooth, never slowing you down. And Simple motion whispers, not shouts, letting the interface shine without clutter.
But these are just the stepping stones, not the destination. We embrace innovation and exploration, encouraging creative ideas. Remember, the most breathtaking interactions often lie just off the principles. So, let's craft motion that not only guides, but also inspires your digital adventures.
Documentation
We follow everything written in framer motion's documentation. So, learn about different properties and API reference from the documenation.
Motion Examples
Easings