DrupalCon Dublin 2016: Animate Your Site
Animation
Animation is skeuomorphism. It is a custom created illusion that makes the websites highly user friendly and creates the perception of a highly dynamic website. It helps in grabbing the attention of the visitors and hence results in increased ‘time on site’ as compared to non-animated sites.
There are various areas in which we can use animation on the website.
- Company’s introduction in the form of storytelling,
- Guided tour of how to use the site,
- Features of a product
- and many more...
When we need user interaction on the website we should use animations.
Basic rules of Animation
There are 12 basic principles in animations, including “Follow through and Overlapping Action”, “Slow in and Slow Out”, “Timing”, “Appeal”.
Performance
Performance of the website depends completely on the technology we choose for implementation. While implementing robust logic, CSS animations will always be lighter than Javascript animations. Most of the browsers use Position, scale, rotation and opacity very lightly. If we are maintaining 60 fps (frames per second), it will not impact the performance much. The higher we start on the timeline waterfall the more work the browser has to do to get pixels on to the screen.
Responsive Animation (will be adaptive for all devices)
For a website, it is also possible to achieve animations which are responsive and work seamlessly on devices of various form factors . Two thumb rules which we need to keep in mind regarding responsive web animations are “Animation Direction” and “Responsive Choreography”.
The session assumes familiarity with basic web and front end concepts.
What we'll discuss:
What is Animation?
Where to use?
Types of animation
12 basic rules of Animation
How can we make it interesting?
How can we achieve animation across the devices?
Performance impact and how can we avoid
Animation in Drupal
Demo
Animation is skeuomorphism. It is a custom created illusion that makes the websites highly user friendly and creates the perception of a highly dynamic website. It helps in grabbing the attention of the visitors and hence results in increased ‘time on site’ as compared to non-animated sites.
There are various areas in which we can use animation on the website.
- Company’s introduction in the form of storytelling,
- Guided tour of how to use the site,
- Features of a product
- and many more...
When we need user interaction on the website we should use animations.
Basic rules of Animation
There are 12 basic principles in animations, including “Follow through and Overlapping Action”, “Slow in and Slow Out”, “Timing”, “Appeal”.
Performance
Performance of the website depends completely on the technology we choose for implementation. While implementing robust logic, CSS animations will always be lighter than Javascript animations. Most of the browsers use Position, scale, rotation and opacity very lightly. If we are maintaining 60 fps (frames per second), it will not impact the performance much. The higher we start on the timeline waterfall the more work the browser has to do to get pixels on to the screen.
Responsive Animation (will be adaptive for all devices)
For a website, it is also possible to achieve animations which are responsive and work seamlessly on devices of various form factors . Two thumb rules which we need to keep in mind regarding responsive web animations are “Animation Direction” and “Responsive Choreography”.
The session assumes familiarity with basic web and front end concepts.
What we'll discuss:
What is Animation?
Where to use?
Types of animation
12 basic rules of Animation
How can we make it interesting?
How can we achieve animation across the devices?
Performance impact and how can we avoid
Animation in Drupal
Demo