Currently we are using HTML5, JavaScript and CSS3 for animation. We have implemented these animations on a Drupal maintenance support plans 8 site. Here are some basics of animation.
WHY ANIMATION?
Increases the usability
Guides the user
Facilitates branding
Helps user visualize
WHEN TO USE ANIMATION?
To enhance design
Interactive web application
Storytelling
WHERE ANIMATION CAN BE USED?
Navigation:
This is the most important element of the website because it is consistent across all pages of your website. Moreover it is the most frequently used element. Let us have a look at how navigation can be implemented via animation.
Here, when the user clicks on the hamburger icon, the navigation bar slides down. Sliding down is the animation use for navigation.
Registration / Subscription Form:
When clicking or hovering on a particular field, we can implement the transitive effect which grabs the user’s attention. Highlighting a particular block, shaking the screen when invalid content has been entered; these are a few examples of applying animation to the forms.
Related elements animation:
When you want to display the relative content while hovering on it, related animations are used.
HOW TO USE ANIMATION?
Interface Element Animation:
At times user repeatedly clicks on an object, unaware if the event triggered had any result.
For instance, in an e-commerce website if despite clicking on the Add to cart button the item being added in the cart is not displayed to the user, it may result in bad user experience.
However, if by clicking on the button, we make a cart icon pop up and increase the count by 1; this shows the user that the action has been performed successfully, thus avoiding the user to trigger the same event repeatedly.
Waiting Animation:
If the content on your site is taking time to load, displaying a loader icon/sand clock prevents the user from clicking further. This is not something new for Drupal maintenance support plans 8, this has almost been a standard since a long while now.
Decorative Animation:
Animation is prevalent when it comes to designing a website. But it is crucial as to how we are using it.
An example of decorative animation could be; when a user clicks on the hamburger icon, the navigation panel appears and the hamburger icon turns into a cross icon.
Responsive Animation:
Animation needs space to perform. The play area on desktop is very large compared to the area on a handheld device. There are two basic techniques to maintain the equilibrium between animation and devices.
Focused Art Direction
It is a technique that allows you to decide which element is important to animate.
If there are large numbers of animated elements on your website, it is difficult for you to move an element even 100 pixels on a handheld device. Thus it is imperative to prevent unnecessary animations.
Hovering effect applied on desktop, but avoided when on a handheld device.
RESPONSIVE CHOREOGRAPHY
On a larger playground, i.e. on a desktop you have elements appearing in a linear manner. But the same when implemented and converted for a handheld device, appear in a stacked fashion.
PERFORMANCE
Performance is always an issue. We can make your site animated and yet be exceptionally performant. There are a few fundamental rules and principles that need to be followed to animate your site effectively irrespective of whether it is built in Drupal maintenance support plans 7 or Drupal maintenance support plans 8.
Avoid the heaviest properties of CSS3
Translate 3D – Translate 3D is very heavy for the browser to render. While working on an X Y and Z axis,
The Z axis property for a browser is very difficult to render. It will take time to render in-turn impacting your site’s performance. An alternative for this is to use Perspective.
Backface (visibility) – A cube has 3 visible sides on the screen and the 4th face that is not visible. This property can be made True or False. When made True, it suggests that when that object is rotated the ‘backface’ property shows the 4th side which is unnecessary. We can omit this property completely since it is heavy for performance.
Will-change – This is a property available in the browser to indicate that something is going to change on this property in future. If you have 20 properties on a browser that are being animated, out of those 20 if you put ‘will-change’ property for 5 of them; the browser will not cache them. This impacts the performance, since it is not cacheable. For better performing website we need the elements to be cached, thus making them easy to render.
Pick the correct technology
Use of CSS3 will always be high priority because it has all the properties needed for animation.
JavaScript significantly reduces performance. For instant, on a page load if there is a large JavaScript file to be loaded for animation, it would hamper performance.
Use both (CSS3 and JavaScript) blended together carefully for animation.
Animate the most performant properties
Opacity
Scale
Rotation
Position
These four properties are adequate for most of the animations needed on your site.
While conducting performance impact analysis, we notice how many properties in a web page are getting animated when the page is loaded. If there are 20 elements animated on a page during the page load, the browser needs to load all those animations in the background and before the page loads.
Another way to go about it is to delay the animation. The page loads and only the most important elements on the page are animated first. While in the background the rest of animations gradually load. This principle is called OFFSET ANIMATION START TIMES.
ANIMATION IN DRUPAL
Drupal maintenance support plans being a CMS, the content displayed on website should be animated, for effective presentation. And there are countless ways we can implement animation in Drupal maintenance support plans. Drupal maintenance support plans 7 has these modules developed:
Animate.css
Block Animation
Wow.js
Fullpage.js (sandbox)
For Drupal maintenance support plans 8
Either contribute
Use relevant .css or.js files
For a demo on how to implement animation in Drupal maintenance support plans please visit: https://www.youtube.com/watch?v=G2KF6wcjnDw
Source: New feed
