Joshua Rowe

Joshua Rowe

1573023707

Vue.js Transitions & Animations - Design Better UX

Most people think that the purpose of transitions and animations is to engage the user’s attention, and this is true to some extent. In certain contexts, such as game websites, where attractiveness and entertainment take precedent, it is justified. However, in most websites, engagement should be the secondary role, while the main role of any transitions or animations should be for communication.

And that will be the subject of this tutorial. We’ll explore how transitions and animations can communicate effectively, and we’ll see how to use them in the context of Vue.js. Of course, to apply the principles discussed below, you can use any other library or framework (such as React or Angular), or plain CSS transitions and animations.

Note: To follow this tutorial, you should have at least some basic knowledge about Vue.js. If you need to get up to speed, try our beginner’s course, Get Started With Vue.

Why Are Transitions and Animations So Important?

In the real world, things don’t just appear and disappear suddenly. They move smoothly, they change gradually. In a house, we see people entering or leaving the rooms. On the road, we see cars approaching or moving away. Even at different speeds, their movement is continuous. So to make an interface familiar and easier to understand, we need to mimic some aspects of this real-world behavior in our websites and applications.

This is the role of transitions and animations. They smooth changes between states. They show and explain what happens in a clear and predictable way. In most cases, without transitional effects, the user would be wondering what just occurred.

In modern websites, where interactivity plays a key role, the knowledge of how to use this powerful design pattern properly is crucial. The first thing human eyes perceive is movement. Human brains just love movement. Movement creates interest and catches the attention, but most importantly it delivers a message. The right message will lead to the right action. So proper use of transitions and animations can be the difference between a user making a purchase or leaving your website.

What Are Transitions and Animations?

A transition is simply the change that occurs while a thing moves between two states. The first state is the starting point, and the second state is the ending point. It’s like when you open your car’s window. The window first is in the closed state, and when you push the button, it gradually transitions to its opened state.

An animation is a series of transitions arranged in a logical order. This means that we have not only starting and ending points, but also several points in between. With transitions, we just go from A to B, or from B to C, and so on. With animations, if we want to go from A to E, for example, we need also to pass through B, C, and D. So the whole animation from A to E is actually made of four transitions, giving an illusion of continuous motion.

How Do Transitions and Animations Improve User Experience?

The first and foremost way in which transitions and animations improve UX is through communication. Just as real-life communication can improve human relationships, similarly in web development, communication can improve the UX of your website or application.

Harry Marks, award-winning broadcast designer, said:

If you don’t have a story, no amount of graphic trickery will make it interesting.

So, if content is king and stories are all-important, the key is to present that content to the users in a pleasant and meaningful way. The story communicates a message to the users and must deliver it in a way that users can understand. Let’s explore some examples:

  • If an object fades away, users know it disappeared.
  • If an object fades into view, users know the object has arrived.
  • If an image thumbnail zooms in after a mouse click or hover, users know that the zoomed image is the large version of the thumbnail.

All these transitions and animations are like road signs. They give the users clues about what to expect. And this leads to a more pleasant user experience.

There are also some important goals which transitions and animations help us to achieve in our application interfaces. They help us to:

  • maintain context while changing views
  • explain what just happened
  • show relationships between objects
  • focus user attention
  • improve perceived performance
  • create an illusion of virtual space

We’ll see how this happens in action in the following examples, but let me first introduce you to Vue.js transitions and animations.

Getting Started With Vue.js Transitions and Animations

Working with Vue.js transitions and animations is easy. Vue.js provides a <transition> component which wraps the element or component you want to animate. It automatically adds three entering and three leaving CSS classes.

v-enter, v-enter-active, and v-enter-to are responsible for the enter transition when the component is enabled or inserted.

v-leave, v-leave-active, and v-leave-to are responsible for the leave transition when the component is disabled or removed.

v-enter/v-leave and v-enter-to/v-leave-to define the starting and ending states of the transition. v-enter-active/v-leave-active define the transition’s configuration, such as duration, easing function, etc.

The <transition> component can have a name property. If we define one, it will replace the default v- prefix in all classes. For example, if the name is set to “menu”, the v-enter class will become menu-enter, and so on.

Let’s now move on to the next section and see how all this is used in practice.

Vue.js Transitions and Animations Use Cases

What follows is a series of use cases which will illustrate the practical application of transitions and animations in Vue.js.

Note: The CSS code unrelated to Vue.js is not shown in the examples for brevity. To see the full code, follow the link to CodePen at the end of each example.

Use Case 1: Dropdown Menu

In this first example, we have a nice dropdown menu which opens at mouse hover. The problem is that this happens too quickly, which is distracting and inconvenient to the users. To make the change between the opening and closing states more smooth and natural, we’ll use CSS transitions. This helps users by explaining what just happened, so they can clearly see the connection between the drop-down button and the menu itself.

Let’s see this in action. First, we create our HTML template:

<div id="app">
  <ul class="navbar">
    <li><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li class="dropdown">
      <button class="dropbtn" @mouseover="show = true" @mouseout="show = false">Dropdown 
        <i class="down-arrow"></i>
      </button>
      <transition name="dropdown">
        <ul class="dropdown-content" v-if="show" @mouseover="show = true" @mouseout="show = false">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
       </ul>
     </transition>
    </li> 
  </ul> 
</div>

This creates a navbar menu with three buttons. The third button will open a drop-down menu, which is an unordered list wrapped with the <transition> component. We set the name attribute for the transition to dropdown. When the show property is true, the menu will appear, and vice versa.

In the JavaScript part, we create a new Vue instance and set the show property initially to false. So the menu will be hidden until we hover over it.

new Vue({
  el: '#app',
  data: {
    show: false
  }
})

Next, we use the transition classes created by Vue to apply the desired CSS transition:

...
 
.dropdown-enter,
.dropdown-leave-to {
  transform: scaleY(0.7);
  opacity: 0;
}
 
.dropdown-enter-to,
.dropdown-leave {
  opacity: 1;
  transform: scaleY(1);
}
 
.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.3s ease-out;
  transform-origin: top center;
}

In the first CSS declaration, we make the menu transparent and slightly scaled down at the beginning of the enter transition and at the end of the leave transition.

In its visible state, we make it fully opaque and scaled to its normal dimensions. In the last declaration, we set the settings for the transition. It will last 0.3 seconds and will have the ease-out easing function applied. Also, we set the transform-origin to top center so the menu will start to appear right below the drop-down button with a nice scroll-down effect.

Use Case 2: Flipping Form

In the second example, we have two forms. One is used to allow users to log in, while the other allows users to create a new profile. Going from one form to another by loading a new page can interrupt the user flow. So we’ll use a flip transition, and thus the switch between the two forms will be sleek and easy. This will help to maintain context while changing views, making the user flow fluent and continuous.

Here is the template code:

<div id="app">
  <transition name="card" mode="out-in">
    <div class="card" v-if="front == true" key="front">
      <h2>Sign In</h2>
      <div class="form">
        <h1>Sign In Form</h1>
      </div>
      <div class="footer">
        <span>Not a member?</span>
        <button @click="front = false">
          Join Us
        </button>
      </div>
    </div>
    <div class="card" v-else key="back">
      <h2>Sign Up</h2>
      <div class="form">
        <h1>Sign Up Form</h1>
      </div>
      <div class="footer">
        <span>Already a member?</span>
        <button @click="front = true">
          Log In
        </button>
      </div>
    </div>
  </transition>
</div>

Here we want to transition between two elements: the sign-in and sign-up forms. Because we are toggling between elements that have the same tag name (we wrap both forms with a <div> tag), they must have unique key attributes. Otherwise, Vue will only replace the content of the element.

Also, because entering and leaving happens simultaneously by default, we need to use the mode attribute. We set it to out-in, so the current element will transition out first, and then, when complete, the other element will transition in.

In the script part, we set the front property to true. So the sign-in form will be displayed first:

new Vue({
  el: '#app',
  data: {
    front: true
  }
})

And now let’s move on to the CSS code:

...
 
.card-enter, .card-leave-to {
  opacity: 0;
  transform: rotateY(90deg);
}
 
.card-enter-active, .card-leave-active {
  transition: all 0.5s;
}

We make the form transparent and rotated 90 degrees at the start of entering and at the end of leaving the transition. Then we set the transition’s duration to 0.5 seconds.

Use Case 3: Modal Window

In the third example, we use a modal window to show users additional information. But the modal appears and disappears abruptly and merges with the background. To solve the problem, we’ll use transitions so the modal will be zoomed in and zoomed out smoothly when it is opened or closed. Also, we’ll dim the background while keeping the modal bright to create more contrast. This will focus the user’s attention in a natural way.

Let’s start with the template again:

<div id="app">
  <div v-bind:class="[isShowing ? blurClass : '', clearClass]">
    <p>Lorem ipsum dolor sit amet...</p>
    <button @click="toggleShow">Say Hello</button>
  </div>
  <transition enter-active-class="animated zoomIn"
    leave-active-class="animated zoomOut">
    <modal v-if="isShowing" class="modal">
      <button @click="toggleShow">Close</button>
    </modal>
  </transition>
</div>

In this example, we use custom transition classes. This way, we can use an animation library such as animate.css. We put the custom classes directly in the <transition> component and use the classes from the animate.css library.

In the script part, we first register the modal component used in the template above. Then, in the Vue instance, we set several properties and one method, which will help us to toggle between visible and hidden state, and apply different classes for each one:

Vue.component('modal', {
  template: `<div>
    <h2>Hello Vue!</h2>
      <slot></slot>
   </div>`
})
 
new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false,
      clearClass: 'clear',
      blurClass: 'blur'
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  }
})

And here are the CSS classes:

...
 
.clear {
  transition: opacity 1s;
}
 
.blur {
  filter: blur(1px);
  opacity: 0.5;
}

The .blur class is applied when the modal is opened, and the .clear class when it is closed.

Use Case 4: To-Do List

In the last example, we have a simple to-do list app. It works fine, but when we add or remove items, they are inserted and removed instantly. Users can be easily confused about what is added and what is removed. To make the user experience more pleasant and predictable, we’ll use an animation when the items are inserted or removed. This will show relationships between items and help users to orientate themselves and understand what’s going on.

Here is the template:

<div id="app">
  <h4>
    {{ name }}'s To Do List
  </h4>
  <div>
    <input v-model="newItemText" />
    <button v-on:click="addNewTodo">Add</button>
    <button v-on:click="removeTodo">Remove</button>
      <transition-group name="list" tag="ul">
        <li v-for="task in tasks" v-bind:key="task" >{{ task }}</li>
      </transition-group>
  </div>
</div>

In this example, we want to animate multiple items, so we need to use the <transition-group> component. Unlike <transition>, it renders an actual element. By default, it is <span>. But we actually need an unordered list, so we need to set the tag attribute to ul.

In the script part, we put some initial data in and create two methods responsible for adding and removing list items:

new Vue({
  el: '#app',
  data: {
    name: "Ivaylo",
    tasks: ['Write my posts', 'Go for a walk', 'Meet my friends', 'Buy fruits'],
    newItemText: ""
  },
  methods: {
    addNewTodo() {
      if (this.newItemText != "") {
        this.tasks.unshift(this.newItemText);
      }
      this.newItemText = "";
    },
    removeTodo() {
      this.tasks.shift();
    },
  },
})

And here are the CSS classes:

...
 
.list-enter-active {
  animation: add-item 1s;
}
 
.list-leave-active {
  position: absolute;
  animation: add-item 1s reverse;
}
 
.list-move {
  transition: transform 1s;
}
@keyframes add-item {
  0% {
    opacity: 0;
    transform: translateX(150px);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-10px) skewX(20deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

In the CSS, we create an add-item animation. We use that animation in the enter transition. In the leave transition, we use the same animation, but reversed. This follows the Symmetry of Interaction principle.

If you try the app at this stage, the items will be animated, but the list itself will just snap to its new place. To make it move smoothly, we need to do two things: first set the position to absolute in the leaving transition, and then add the move class which Vue provides especially for list transitions.

Best Practices for Transitions and Animations

As you can see, transitions and animations are a powerful way to communicate and engage the user. If used correctly, they can greatly improve the UX. To make it easy to remember, I’ve prepared the following list of best practices for employing transitions and animations in your websites or applications.

  • The key to making a good transition is the balance of speed. The right duration differs for each individual use case, but as a rule of thumb, a transition should look and feel natural—not too fast, not too slow.
  • Rapid movement and movement towards the user are considered more important than slow movement and movement away from the user.
  • Avoid transitional effects which annoy and distract rather than communicate. The user’s attention must be gently guided and directed, not forcibly commanded and dominated.
  • Avoid overuse of transitions by only using them to communicate change in the interface.
  • Usually, transitions should be reflexive. If users create an object and it slides in, then when it is removed it should slide out with a reverse transition. This illustrates the Symmetry of Interaction principle.
  • To make the transitions more discoverable, you should keep them near the user’s area of focus. This also will help feel them less like advertising.

Conclusion

I hope that after reading this post you now have a much better understanding of what transitions and animations are and how to use them correctly. You’ve also seen how to apply them, in the context of Vue.js, to your website or application’s user interface, making the UX better and users happy.

#vuejs #vue #javascript #Animations

What is GEEK

Buddha Community

Vue.js Transitions & Animations - Design Better UX
WebClues Infotech

WebClues Infotech

1623146635

UI/UX Design & Development Company | UI/UX Design Services

UI/UX Design & Development Company

The main factor that defines the success of any mobile app or website is the UI/UX of that app. The UI/UX is responsible for app elegance and ease of use of the app or website.

Want a unique UI/UX designer for an app or website development?

WebClues Infotech has the best UI/UX developers as they have a good experience of developing more than 950+ designs for the customers of WebClues Infotech. With a flexible price structure based on customer requirements, WebClues Infotech is one of the efficient and flexible UI/UX developers.

Want to know more about our UI/UX design services?

Visit: https://www.webcluesinfotech.com/ui-ux-development-company/

Share your requirements https://www.webcluesinfotech.com/contact-us/

View Portfolio https://www.webcluesinfotech.com/portfolio/

#ui/ux design & development company #ui/ux design services #ui ux design company #ui/ux development services #hire ui/ux designers #hire dedicated ui/ux designer

Aria Barnes

Aria Barnes

1625232484

Why is Vue JS the most Preferred Choice for Responsive Web Application Development?

For more than two decades, JavaScript has facilitated businesses to develop responsive web applications for their customers. Used both client and server-side, JavaScript enables you to bring dynamics to pages through expanded functionality and real-time modifications.

Did you know!

According to a web development survey 2020, JavaScript is the most used language for the 8th year, with 67.7% of people choosing it. With this came up several javascript frameworks for frontend, backend development, or even testing.

And one such framework is Vue.Js. It is used to build simple projects and can also be advanced to create sophisticated apps using state-of-the-art tools. Beyond that, some other solid reasons give Vuejs a thumbs up for responsive web application development.

Want to know them? Then follow this blog until the end. Through this article, I will describe all the reasons and benefits of Vue js development. So, stay tuned.

Vue.Js - A Brief Introduction

Released in the year 2014 for public use, Vue.Js is an open-source JavaScript framework used to create UIs and single-page applications. It has over 77.4 million likes on Github for creating intuitive web interfaces.

The recent version is Vue.js 2.6, and is the second most preferred framework according to Stack Overflow Developer Survey 2019.

Every Vue.js development company is widely using the framework across the world for responsive web application development. It is centered around the view layer, provides a lot of functionality for the view layer, and builds single-page web applications.

Some most astonishing stats about Vue.Js:

• Vue was ranked #2 in the Front End JavaScript Framework rankings in the State of JS 2019 survey by developers.

• Approximately 427k to 693k sites are built with Vue js, according to Wappalyzer and BuiltWith statistics of June 2020.

• According to the State of JS 2019 survey, 40.5% of JavaScript developers are currently using Vue, while 34.5% have shown keen interest in using it in the future.

• In Stack Overflow's Developer Survey 2020, Vue was ranked the 3rd most popular front-end JavaScript framework.

Why is Vue.Js so popular?

• High-speed run-time performance
• Vue.Js uses a virtual DOM.
• The main focus is on the core library, while the collaborating libraries handle other features such as global state management and routing.
• Vue.JS provides responsive visual components.

Top 7 Reasons to Choose Vue JS for Web Application Development

Vue js development has certain benefits, which will encourage you to use it in your projects. For example, Vue.js is similar to Angular and React in many aspects, and it continues to enjoy increasing popularity compared to other frameworks.

The framework is only 20 kilobytes in size, making it easy for you to download files instantly. Vue.js easily beats other frameworks when it comes to loading times and usage.

Take a look at the compelling advantages of using Vue.Js for web app development.

#1 Simple Integration

Vue.Js is popular because it allows you to integrate Vue.js into other frameworks such as React, enabling you to customize the project as per your needs and requirements.

It helps you build apps with Vue.js from scratch and introduce Vue.js elements into their existing apps. Due to its ease of integration, Vue.js is becoming a popular choice for web development as it can be used with various existing web applications.

You can feel free to include Vue.js CDN and start using it. Most third-party Vue components and libraries are additionally accessible and supported with the Vue.js CDN.

You don't need to set up node and npm to start using Vue.js. This implies that it helps develop new web applications, just like modifying previous applications.

The diversity of components allows you to create different types of web applications and replace existing frameworks. In addition, you can also choose to hire Vue js developers to use the technology to experiment with many other JavaScript applications.

#2 Easy to Understand

One of the main reasons for the growing popularity of Vue.Js is that the framework is straightforward to understand for individuals. This means that you can easily add Vue.Js to your web projects.

Also, Vue.Js has a well-defined architecture for storing your data with life-cycle and custom methods. Vue.Js also provides additional features such as watchers, directives, and computed properties, making it extremely easy to build modern apps and web applications with ease.

Another significant advantage of using the Vue.Js framework is that it makes it easy to build small and large-scale web applications in the shortest amount of time.

#3 Well-defined Ecosystem

The VueJS ecosystem is vibrant and well-defined, allowing Vue.Js development company to switch users to VueJS over other frameworks for web app development.

Without spending hours, you can easily find solutions to your problems. Furthermore, VueJs lets you choose only the building blocks you need.

Although the main focus of Vue is the view layer, with the help of Vue Router, Vue Test Utils, Vuex, and Vue CLI, you can find solutions and recommendations for frequently occurring problems.

The problems fall into these categories, and hence it becomes easy for programmers to get started with coding right away and not waste time figuring out how to use these tools.

The Vue ecosystem is easy to customize and scales between a library and a framework. Compared to other frameworks, its development speed is excellent, and it can also integrate different projects. This is the reason why most website development companies also prefer the Vue.Js ecosystem over others.

#4 Flexibility

Another benefit of going with Vue.Js for web app development needs is flexibility. Vue.Js provides an excellent level of flexibility. And makes it easier for web app development companies to write their templates in HTML, JavaScript, or pure JavaScript using virtual nodes.

Another significant benefit of using Vue.Js is that it makes it easier for developers to work with tools like templating engines, CSS preprocessors, and type checking tools like TypeScript.

#5 Two-Way Communication

Vue.Js is an excellent option for you because it encourages two-way communication. This has become possible with the MVVM architecture to handle HTML blocks. In this way, Vue.Js is very similar to Angular.Js, making it easier to handle HTML blocks as well.

With Vue.Js, two-way data binding is straightforward. This means that any changes made by the developer to the UI are passed to the data, and the changes made to the data are reflected in the UI.

This is also one reason why Vue.Js is also known as reactive because it can react to changes made to the data. This sets it apart from other libraries such as React.Js, which are designed to support only one-way communication.

#6 Detailed Documentation

One essential thing is well-defined documentation that helps you understand the required mechanism and build your application with ease. It shows all the options offered by the framework and related best practice examples.

Vue has excellent docs, and its API references are one of the best in the industry. They are well written, clear, and accessible in dealing with everything you need to know to build a Vue application.

Besides, the documentation at Vue.js is constantly improved and updated. It also includes a simple introductory guide and an excellent overview of the API. Perhaps, this is one of the most detailed documentation available for this type of language.

#7 Large Community Support

Support for the platform is impressive. In 2018, support continued to impress as every question was answered diligently. Over 6,200 problems were solved with an average resolution time of just six hours.

To support the community, there are frequent release cycles of updated information. Furthermore, the community continues to grow and develop with backend support from developers.



Wrapping Up

VueJS is an incredible choice for responsive web app development. Since it is lightweight and user-friendly, it builds a fast and integrated web application. The capabilities and potential of VueJS for web app development are extensive.

While Vuejs is simple to get started with, using it to build scalable web apps requires professionalism. Hence, you can approach a top Vue js development company in India to develop high-performing web apps.

Equipped with all the above features, it doesn't matter whether you want to build a small concept app or a full-fledged web app; Vue.Js is the most performant you can rely on.

Original source

 

#vue js development company #vue js development company in india #vue js development company india #vue js development services #vue js development #vue js development companies

WebClues Infotech

WebClues Infotech

1618830663

Hire UI/UX Designer | Hire Creative UI/UX Designer

In this digital age merely an online business presence is not sufficient for business growth. The digital resource should be interactive, elegant, and easy to use.

Who would be able to create such an experience? UI/UX Designer

Hire the top-notch UI/UX designer for your Website or App development from WebClues Infotech. With some large names in its client base, WebClues Infotech has offered its UI/UX designers to create an amazing work of art in terms of mobile app development.

Want to develop a unique and elegant design for your website or App?

Get in touch with WebClues Infotech

Share your requirements here https://www.webcluesinfotech.com/contact-us/

Book Free Interview with UI/UX Designer: https://bit.ly/3dDShFg

View Portfolio https://www.webcluesinfotech.com/portfolio/

#hire ui/ux developers #hire dedicated ui/ux designer #hire a designer #top ux/ui designers for hire #hire ui/ux designers #hire creative ui/ux designer

AppClues Infotech

AppClues Infotech

1611916517

Hire Best UI/UX Mobile App Designers in USA

Do you want to make a user-engaging mobile app with a top-notch UI/UX design? We at AppClues Infotech have a creative & top-notch UI/UX designers team that helps to create a magnificent app design & development for your business with modern technologies.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#best ui/ux mobile app designers in usa #top ui/ux design company in usa #hire the best ui/ux designers in usa #ui/ux design company #best ui/ux design company in usa #custom mobile app design services in usa

AppClues Infotech

AppClues Infotech

1599736911

User Experience Design: Which are the top UI/UX design firms in San Francisco Bay Area?

User experience is something more than what users see behind the glass. Focusing on user experience, AppClues Infotech has assisted myriads of start-ups and enterprises run their operations more efficiently. It has designed stunning interfaces that provide phenomenal experience to the users.

Our designers are leaders in solving complex business challenges while giving users simple and memorable experiences. We specialize in cross-channel, user experience design for web platforms, web-based software applications.

Services We Provide:

  • Usability Testing
  • Benchmarking & Competitive Analysis
  • Expert Design Review
  • Information Architecture Analysis
  • UX Strategy Guidance & Planning
  • UX Training

Our UX Design Process :

  • Understand retirements Create user person Define use case
  • Analyze Competitors research latest UX trends Keep an eye on guidelines
  • Gather ideas Draw sketches and wireframes Evaluate and re – draw
  • Design Images create Prototype Define Guidelines
  • Implement functionality build experience
  • Perform usability testing create audit reports identify improvements

AppClues Infotech’s team is proficient in nurturing brands with beautiful design and improve their identity as prominent player of their niche. Our area of expertise includes user experience (UX) design, user interaction design, user interface (UI) design, prototyping, business design, design strategy, and design research.

Our team thrives on solving complex design problems and realizing digital product ideas. We are experts in making custom mobile applications, creating personalized corporate websites, and designing other digital tools. We use design and technology to help companies thrive in a digital world.

Our UX designers dive in deep to understand the different user personas for your product and add particular design elements that can enhance their user experience. Our design process stems from an agile and a responsive digital development process that incorporates effective collaboration.

Contact us and we will give you individual customized solution for your business requirements.

View our Portfolio

#ui/ux design #best ui/ux design company #top ui/ux design company #best ui/ux design services agency #hire ui ux design agency