& what I learnt about them this year.
By Lindsay Jopson
@lindsay_jopson
.box {
background: #2db34a;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
.box:hover {
background: #ff7b29;
}
@keyframes slide {
0% {
left: 0;
top: 0;
}
50% {
left: 244px;
top: 100px;
}
100% {
left: 488px;
top: 0;
}
}
.stage {
background: #eaeaed;
border-radius: 6px;
height: 150px;
position: relative;
min-width: 538px;
}
.stage:hover .ball {
animation: slide 2s linear;
}
.ball {
background: #2db34a;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
After a trend was appearing on the internet regarding 'off canvas' style website navigation we decided to implement on our latest website development.
I was assigned to develop the website so I had a look around in how they were done and figured 'a hah! this is easy!' so off I went....
My days were good! I had all my files structured out how I liked them.
I had the navigation well on track and all was looking smooth and sexy.... until...
This is using an iPhone 6...
Clearly this was a bit of a disappointment. I wasn't really all the wise with browsers and their processing power and what does what. So I figured must be a slow phone... pfft looks good on my desktop.
After a while I started to come across articles & seeing how other navigation were smooth and why wasn't mine.
The reason came down to how I was preforming the transition. I was using an 'expensive' way of transitioning.
.main__navigation{
position: absolute;
left: -250px;
&.is-expanded{
left: 0;
}
}
Can be busy doing calculations and becomes unresponsive to a user.
Stays responsive to the user. If the main thread cant keep up, it runs off with whats its got.
When we animate an element, the browser has to re-evaluate the page frame by frame. It does this to determine if and how the element has affected elements close by and the overall page.
This process is called 'reflow'.
Reflows can be expensive which make our transitions appear jumpy.
.main__navigation{
position: absolute;
left: -250px;
&.is-expanded{
left: 0;
}
}
.main__navigation{
position: absolute;
left: 0;
@include transform(translateX(-250px));
&.is-expanded {
@include transform(translateX(0px));
}
}
//non sass
.main__navigation{
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
}
.main__navigation.is-expanded{
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
Google Chrome Performance Profiling
Keep that fps close to 60fps
Before:
After:
Painting
Rendering
So this is a good question.. its been around for ages and works.
Ultimately I would say this is dependent on the task at hand.
If it is a simple transition that can be handled by all your necessary browsers out of the box, roll it with.
If you need to do some wizardry & you are comfy in Javascript... you would be silly not to.
As transitions & animations become widely accepted and supported across the browsersphere, they should be used to enhance the User Experience and not detract from the pleasure of a snappy, well crafted website.
If something doesn't need to transition... Dont.
@lindsay_jopson