Adjusting transition speeds in jQuery Mobile

March 19, 2014, 5:33 pm
Author: James Griffiths

We've recently started developing with jQuery Mobile (jQM) and ran into an issue with the speed of page transitions taking place in our Adobe AIR application. Unlike previous complaints registered online from user's concerned about jQM running slowly we found the transitions were running too fast and needed to find a way to slow them down.

As jQM uses CSS 3 animations to create different types of page transitions all we needed to do was edit the associated jQM stylesheet (which, having downloaded the current version of jQM at the time of writing, was jquery.mobile-1.4.2.css) and adjust the relevant selector rules.

For reference, jQM offers the following transitions:

  • fade
  • pop
  • flip
  • turn
  • flow
  • slidefade
  • slide
  • slideup
  • slidedown

Out of the above transitions we were using the flow option to animate our page changes. In order to amend the timings we needed to pay attention to the .flow.in and .flow.out rules as page transitions consist of 2 operations: entering (.in) and exiting (.out) the screen.

The default rules for the flow transition type are shown below:

.flow.out {
	-webkit-transform: translateX(-100%) scale(.7);
	-webkit-animation-name: flowouttoleft;
	-webkit-animation-timing-function: ease;
	-webkit-animation-duration: 350ms;
	-moz-transform: translateX(-100%) scale(.7);
	-moz-animation-name: flowouttoleft;
	-moz-animation-timing-function: ease;
	-moz-animation-duration: 350ms;
	transform: translateX(-100%) scale(.7);
	animation-name: flowouttoleft;
	animation-timing-function: ease;
	animation-duration: 350ms;
}
.flow.in {
	-webkit-transform: translateX(0) scale(1);
	-webkit-animation-name: flowinfromright;
	-webkit-animation-timing-function: ease;
	-webkit-animation-duration: 350ms;
	-moz-transform: translateX(0) scale(1);
	-moz-animation-name: flowinfromright;
	-moz-animation-timing-function: ease;
	-moz-animation-duration: 350ms;
	transform: translateX(0) scale(1);
	animation-name: flowinfromright;
	animation-timing-function: ease;
	animation-duration: 350ms;
}

As we were developing on Adobe AIR (which uses the webkit rendering engine) we could safely ignore anything -moz related and target only the following rules:

  • -webkit-animation-duration
  • animation-duration

With these in mind we increased the timings for these rules from 350ms to 950ms as demonstrated below:

.flow.out {
	-webkit-transform: translateX(-100%) scale(.7);
	-webkit-animation-name: flowouttoleft;
	-webkit-animation-timing-function: ease;
	-webkit-animation-duration: 950ms;
	-moz-transform: translateX(-100%) scale(.7);
	-moz-animation-name: flowouttoleft;
	-moz-animation-timing-function: ease;
	-moz-animation-duration: 350ms;
	transform: translateX(-100%) scale(.7);
	animation-name: flowouttoleft;
	animation-timing-function: ease;
	animation-duration: 950ms;
}
.flow.in {
	-webkit-transform: translateX(0) scale(1);
	-webkit-animation-name: flowinfromright;
	-webkit-animation-timing-function: ease;
	-webkit-animation-duration: 950ms;
	-moz-transform: translateX(0) scale(1);
	-moz-animation-name: flowinfromright;
	-moz-animation-timing-function: ease;
	-moz-animation-duration: 350ms;
	transform: translateX(0) scale(1);
	animation-name: flowinfromright;
	animation-timing-function: ease;
	animation-duration: 950ms;
}

The same process can be followed for other transition rules such as flip.out and flip.in which demonstrates just how easy it is to customise jQM.

Categories

« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.