191 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
XPages Tip: Adding a Bootstrap Class to All Labels via the Theme (Redux)
Wed, Jul 20th 2016 3
XPages Tip: Overriding, Concatenating, and Conditionally Adding Control Properties via a Theme
Wed, Jul 20th 2016 5
XPages Tip: Displaying Bootstrap Applications Properly on Mobile Devices
Tue, May 31st 2016 4
Efficiently Keeping an XPages Session Alive with JSON RPC
Wed, May 25th 2016 3
Browser Session Lifespan – Idle Session Timeout vs LTPA Token Expiration
Tue, May 24th 2016 5
XPages Tip: Passing an Array to a Custom Control Property
Tue, Apr 12th 2016 2
XPages Tip: Beware Server-Side code in Multiple onClientLoad Events
Thu, Apr 7th 2016 4
Top 10
Passing Parameters to SSJS from a Client-side partialRefreshGet()
Mon, Jul 14th 2014 10
Computing Custom Date Format Patterns Throughout an Application
Mon, Aug 18th 2014 10
I want to hear what YOU have to say
Mon, Feb 3rd 2014 7
Dojo Data Grid – Part 36: Conditionally Preventing Cell Editing
Tue, Feb 4th 2014 7
Dojo in XPages – 2: String Manipulation
Fri, Feb 7th 2014 7
XPages Tip: Disabling Required Validation in a Dojo Filtering Select
Fri, Aug 1st 2014 7
Gridx in XPages – 12: Adding Event Handlers and Opening a Document
Wed, Dec 3rd 2014 7
Gridx in XPages – 13: Customizing Cell Content
Fri, Dec 5th 2014 7
Gridx in XPages – 18: Formatting Date and Currency Columns
Thu, Dec 18th 2014 7
Dojo in XPages – 23: Using a Lightbox to Display Image Attachments
Thu, May 15th 2014 6


Dojo in XPages – 15: Modifying the Rate of Animation with Easing Functions
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
Brad Balassaitis    

In the last few posts, we’ve looked at dojo code to perform pre-defined animations and custom animations. By default, the animations progress in a linear fashion, but the rate of animation can be changed. In this post, we’ll take a look at the easing functions that are available to modify animations.

Dojo in XPages Series

Dojo in XPages — All Blog Posts

Built-In Easing Functions

The easing property of an animation defines the rate of the animation.

You can write your own function to use, but there are 31 built-in functions already available to save you some time.

The default is linear – it performs the transition evenly throughout. The other methods are mathematical calculations that change the rate of the transition at the beginning or end (or both).

Easing Function Effect on Transition
linear No effect — even throughout
quadIn, quadOut, quadInOut rate by power of 2
cubicIn, cubicOut, cubicInOut rate by power of 3
quartIn, quartOut, quartInOut rate by power of 4
quintIn, quintOut, quintInOut rate by power of 5
sineIn, sineOut, sineInOut rate by sine function over time
expoIn, expoOut, expoInOut exponential effect
circIn, circOut, circInOut circular effect
backIn, backOut, backInOut start away from target, then move toward it
elasticIn, elasticOut, elasticInOut back and forth, then toward target
bounceIn, bounceOut, bounceInOut bounce near the beginning or end

Naming Convention

The functions are all named consistently. They specify the affect and at which end(s) the effect will be applied.

  • The *In functions start slowly and then speed up toward the end
  • The *Out functions start faster and end slowly (the opposite of the *In functions)
  • The *InOut functions start slowly, speed up, then end slowly

Dojo Modules to Include

The easing functions are part of the dojo.fx.easing module, so you’ll need to include it on your page in order to use them. (This is in addition to including dojo.fx if you’re using a function in that module.)

Example

Here’s an example that will take a div called myDiv on the page and move it, using the bounceIn easing function:

dojo.fx.slideTo({
  node:"myDiv",
  top: 100,
  left: 400,
  easing: dojo.fx.easing.bounceIn,
  duration: 3000
}).play();

More Examples

There’s a good demo already set up in the Dojo documentation that allows you to test each one of these easing functions.

https://dojotoolkit.org/reference-guide/1.8/dojo/fx/easing.html#examples

Just click the Play button and you can choose a function to try. Test them out and use whatever suits your needs best




---------------------
http://xcellerant.net/2014/03/20/dojo-in-xpages-15-modifying-the-rate-of-animation-with-easing-functions/
Mar 20, 2014
5 hits



Recent Blog Posts
3
XPages Tip: Adding a Bootstrap Class to All Labels via the Theme (Redux)
Wed, Jul 20th 2016 7:08a   Brad Balassaitis
A
5
XPages Tip: Overriding, Concatenating, and Conditionally Adding Control Properties via a Theme
Wed, Jul 20th 2016 7:07a   Brad Balassaitis
A
4
XPages Tip: Displaying Bootstrap Applications Properly on Mobile Devices
Tue, May 31st 2016 7:07a   Brad Balassaitis
A
3
Efficiently Keeping an XPages Session Alive with JSON RPC
Wed, May 25th 2016 7:07a   Brad Balassaitis
A
5
Browser Session Lifespan – Idle Session Timeout vs LTPA Token Expiration
Tue, May 24th 2016 10:15a   Brad Balassaitis
I recently spent some time investigating a client’s reports of unexpected behavior with the duration of browser sessions while testing an application on a test server. From time to time, they were required to login even while actively using an application. In this post, I’ll highlight the difference between an idle session timeout and an […]
2
XPages Tip: Passing an Array to a Custom Control Property
Tue, Apr 12th 2016 6:06a   Brad Balassaitis
A
4
XPages Tip: Beware Server-Side code in Multiple onClientLoad Events
Thu, Apr 7th 2016 6:06a   Brad Balassaitis
A
2
getFragment() Doesn’t
Thu, Mar 24th 2016 7:07a   Brad Balassaitis
A
5
Transferring a Bitbucket Repository
Tue, Mar 22nd 2016 7:07a   Brad Balassaitis
A
3
Handling Errors in an XPages RPC Method
Wed, Feb 17th 2016 7:07a   Brad Balassaitis
A




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition