Home-Baked-Code

In this post I will show you how to create an ease in/out function using power functions, i.e., functions of the form f(x)=cxa. While c and a in a power function could be any real number, here we will omit the c variable (c=1) and use values greater than 1 for a. Let's see how a power function looks like.

Every power function has a very usefull characteristic; f(1)=c because 1a=1 for all a. In our case this means that f(1)=1 as we set c=1 above. If we bound the domain of the function to the closed interval [0,1] then we have a curve that always begins at (0,0) and ends at (1,1) regardless of the a value. This curve can be scaled very easily in both dimensions to fit our needs.

The above curve (in red) could be used as an ease in function, but what if we also want a smooth ending to our transition? To achieve this we will use a second power function and some basic school math. Actually we will start with a same function and we will try to flip and shift it in order to dock at the end of the first one.

f(x)=xa, g(x)=xa

Step 1 : flip vertically

g(x)=xa → g(x)=-xa

Step 2 : flip horizontally

g(x)=-xa → g(x)=-(-x)a

* Notice that -(-x)a is different than - -(x)a, so you can't omit the minus symbols!

* Programmatically step 1 and step 2 can be replaced with a single condition check. If a is odd then we should begin directly from step 3. If a is even we must flip g vertically (step 1) and then continue to step 3 (omitting step 2). This is because power functions with odd exponent have different type of symmetry than those with even exponent.

Step 3 : shift vertically

g(x)=-(-x)a → g(x)=-(-x)a+2

Step 4 : shift horizontally

g(x)=-(-x)a+2 → g(x)=-(-x+2)a+2

We could stop in this step but our function starts at (0,0) and ends at (2,2). It would be more convenient if our function ended at (1,1).

Step 5 : normalize

f(x)=xa → f(x)=(x*2)a/2

g(x)=-(-x+2)a+2 → g(x)=(-(-x*2+2)a+2)/2

Step 6 : combine

f(x)=(x*2)a/2 for 0 ≤ x ≤ 0.5 and f(x)=g(x)=(-(-x*2+2)a+2)/2 for 0.5 ≤ x ≤ 1

With this formula you can produce a variety of curves by just adjusting the value of a.

If you are looking to add an animated scroll effect to a web page then you will find many jQuery examples out there. In my case, jQuery wasn't a desired option, so I decided to write down my own version of this effect, without using any JavaScript libraries.

The recipe

First of all we need a target element. The one that we will scroll to.

A Timer which will handle the scrolling

A mathetical function that will serve as the movement function.

We need to calculate three values; the current scroll position (startY), the vertical position of the top edge of the target element (targetY) and the distance that the viewport has to travel to reach the target element (scrollDistance).

If we have these values then we can create a function which will calculate the viewport position and do the actual scrolling (step). After that we need a timer which will be used to keep the time and call our function repeatedly until the viewport has reached the target position.

For the movement I will use a quartic function (i.e. a function of the form f(x)=x4) but you can use whatever function you like. Actually to achieve a smooth start, as well as a smooth stop, I will use a combination of two quartic functions. (More on this post; "Smooth transitions with power functions")

The code

var scrollTimer; //the animation timer var scrolling=false; //is the page still scrolling from a previous call? function scrollToElement(el) { //if the page is already scrolling then stop the timer if(scrolling){clearInterval(scrollTimer);} else {scrolling=true;} var startY=window.pageYOffset||document.body.parentNode.scrollTop; var time=0; //calculate element's top var targetY=el.offsetTop; while((el=el.offsetParent)!=null) {targetY+=el.offsetTop;} //calculate the distance that the page has to scroll in order to reach the 'targetY' var scrollDistance=targetY-startY; //calculate the scroll position var step=function() { time+=.025; // time increment - this will affect the duration of the scrolling if(time<1) {window.scroll(0,startY+Math.pow(time,4)/2*scrollDistance);} else{window.scroll(0,startY+(2-Math.pow(time-2,4))/2*scrollDistance);} if(time>=2) {clearInterval(scrollTimer);scrolling=false;} } //start scrolling scrollTimer=setInterval(step,12); return false; //cancel the default behavior of the element }

Here is a usage example:

<a href="#chapter5" onclick="return scrollToElement(document.getElementsByName('chapter5')[0]);"> Jump to Chapter 5 </a> <!-- ...some html here... --> <a name="chapter5"></a>