Animate Your Site in Drupal 8 - Faichi (1).pdfirrespective of whether it is built in Drupal 7 or...
Transcript of Animate Your Site in Drupal 8 - Faichi (1).pdfirrespective of whether it is built in Drupal 7 or...
© Faichi Solutions, LLC
Animate Your Site in Drupal 8
‘Animation’ is a term everybody is familiar with. It gives an object the ability to move, breathe, and settle
down. Animation depends upon number of frames being used, which results in a smooth effect. Let us revisit
the history of animation:
Currently we are using HTML5, JavaScript and CSS3 for animation. We have implemented these animations on
a Drupal 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
© Faichi Solutions, LLC
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.
© Faichi Solutions, LLC
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.
© Faichi Solutions, LLC
Related elements animation:
When you want to display the relative content while hovering on it, related animations are used.
© Faichi Solutions, LLC
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 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.
1. 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.
© Faichi Solutions, LLC
Hovering effect applied on desktop, but avoided when on a handheld device.
© Faichi Solutions, LLC
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.
© Faichi Solutions, LLC
© Faichi Solutions, LLC
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 7 or Drupal 8.
Avoid the heaviest properties of CSS3
1. 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.
2. 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.
3. 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
1. Use of CSS3 will always be high priority because it has all the properties needed for animation.
2. 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.
3. Use both (CSS3 and JavaScript) blended together carefully for animation.
Animate the most performant properties
1. Opacity
2. Scale
3. Rotation
4. 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.
© Faichi Solutions, LLC
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 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. Drupal 7 has these modules developed:
Animate.css
Block Animation
Wow.js
Fullpage.js (sandbox)
For Drupal 8
Either contribute
Use relevant .css or.js files
For a demo on how to implement animation in Drupal please visit:
https://www.youtube.com/watch?v=G2KF6wcjnDw