Sliding Panel Animation

Question

I'm trying to adjust the easing of the sliding panel
animation. I'm hoping it will start up a little slower before
zipping off screen.
I'm trying to replicate the motion of this slider:
http://www.ndoherty.com/demos/coda-slider/1.1/
I think the needed changes are in this part of
SprySlidingPanels.js, but I can't figure it out. Can anybody help?
Thanks!!
Spry.Widget.SlidingPanels.PanelAnimator
= function(ele, curX, curY, dstX, dstY, opts)
this.element = ele;
this.curX = curX;
this.curY = curY;
this.dstX = dstX;
this.dstY = dstY;
this.fps = 60;
this.duration = 500;
this.transition =
Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition;
this.startTime = 0;
this.timerID = 0;
this.finish = null;
var self = this;
this.intervalFunc = function() { self.step(); };
Spry.Widget.SlidingPanels.setOptions(this, opts, true);
this.interval = 1000/this.fps;
Spry.Widget.SlidingPanels.PanelAnimator.defaultTransition =
function(time, begin, finish, duration) { time /= duration; return
begin + ((2 - time) * time * finish); };
Spry.Widget.SlidingPanels.PanelAnimator.prototype.start =
function()
this.stop();
this.startTime = (new Date()).getTime();
this.timerID = setTimeout(this.intervalFunc, this.interval);
Spry.Widget.SlidingPanels.PanelAnimator.prototype.stop =
function()
if (this.timerID)
clearTimeout(this.timerID);
this.timerID = 0;
Spry.Widget.SlidingPanels.PanelAnimator.prototype.step =
function()
var elapsedTime = (new Date()).getTime() - this.startTime;
var done = elapsedTime >= this.duration;
var x, y;
if (done)
x = this.curX = this.dstX;
y = this.curY = this.dstY;
else
x = this.transition(elapsedTime, this.curX, this.dstX -
this.curX, this.duration);
y = this.transition(elapsedTime, this.curY, this.dstY -
this.curY, this.duration);
this.element.style.left = x + "px";
this.element.style.top = y + "px";
if (!done)
this.timerID = setTimeout(this.intervalFunc, this.interval);
else if (this.finish)
this.finish();

Answer 1

Another change I made based on nice features of the Coda
Slider I referenced above:
Able to Link/Bookmark particular panels
We want to add an anchor hashes (#1, #2, #3 etc) to the url
for each panel, and then in the js file, extract the hash and make
it the default.
IN THE HTML:
<!-- Panel Navigation -- hashes added to url and return
now set to true -->
<a href="#1" onclick="sp2.showPanel(0); return
true;">1</a> |
<a href="#2" onclick="sp2.showPanel(1); return
true;">2</a> |
<a href="#3" onclick="sp2.showPanel(2); return
true;">3</a> |
<a href="#4" onclick="sp2.showPanel(3); return
true;">4</a> |
<a href="#5" onclick="sp2.showPanel(4); return
true;">5</a>
<!-- Panels themselves stay the same. This example shows
images. -->
<div id="example2" class="SlidingPanels" tabindex="0">
<div class="SlidingPanelsContentGroup">
<div id="ex2_p1" class="SlidingPanelsContent
p1"><img src="image1.jpg" ></div>
<div id="ex2_p2" class="SlidingPanelsContent
p2"><img src="image2.jpg"></div>
<div id="ex2_p3" class="SlidingPanelsContent
p3"><img src="images3.jpg"></div>
<div id="ex2_p4" class="SlidingPanelsContent
p4"><img src="images4.jpg"></div>
<div id="ex2_p5" class="SlidingPanelsContent
p5"><img src="image5.jpg"></div>
</div>
</div>
IN THE Spry.SlidingPanels.js FILE:
// Add this right before the part about default
// NEW STUFF HERE
// Grabs the number after the hash and makes it the default
// Note: had to add the hashes to the <a href> and set
return to true
this.defaultPanel = parseInt(location.hash.slice(1));
this.defaultPanel = this.defaultPanel-1;
// my hash numbers start at 1 but the array starts at 0, so
subtracted 1 from mine
// Back to regularly scheduled programming
// END NEW STUFF
Hope this helps someone.