I have a jQuery animation which slows down too much at the end using the default swing easing. I tried the linear option but it looked similarly slow near the end. I went through and tried several of the easing functions found here. Because I have several other animations running with delays to synchronise them it seems that any easing function that varies too much from the original swing easing throws everything way out of synch. After some searching I found a easeOutInQuad function with a graph that looked like the inverse of the swing function. I thought a easing function that was the inverse(or close to the inverse) of the swing function would be less likely to change the total time to run the animation. Here is the easeOutInQuad and dependent easeOutQuad and easeInQuad functions as I have in my code:
$(function(){$.extend($.easing,{
easeOutQuad:function(e,f,a,h,g){
return -h*(f/=g)*(f-2)+a;
},
easeInQuad:function(e,f,a,h,g){
return h*(f/=g)*f+a;
},
easeOutInQuad:function(e,f,a,h,g){
if(f<g/2){
return easeOutQuad(f*2,a,h/2,g);
}return easeInQuad((f*2)-g,a+h/2,h/2,g);
}
});});
For some reason I get a easeOutQuad is undefined error when I run the animation. I'm somewhat new to jQuery. Any help is appreciated.
For reference here is the rest of the code I'm working with:
$(document).ready(function() {
var fC_duration = 10000;
//flyingCrow synchronization *No Edit*
var rW_delay = 0.021*fC_duration;
var uFin_delay = 0.183*fC_duration;
var uFout_delay = 0.025*fC_duration;
var mF_delay = 0.225*fC_duration;
var dF_delay = 0.242*fC_duration;
//bruce2 and and hand FadeOut synchronization *No Edit*
var b2_delay = 0.133*fC_duration;
//synchronize cardGrab with flyingCrow *No Edit*
var fCgC_sync = 0.417*fC_duration;
// Syncs completion of bruce animations with start of flyingCrow
var bFc_sync = fC_duration+3000;
$(function(){$.extend($.easing,{
easeOutQuad:function(e,f,a,h,g){
return -h*(f/=g)*(f-2)+a;
},
easeInQuad:function(e,f,a,h,g){
return h*(f/=g)*f+a;
},
easeOutInQuad:function(e,f,a,h,g){
if(f<g/2){
return easeOutQuad(f*2,a,h/2,g);
}return easeInQuad((f*2)-g,a+h/2,h/2,g);
}
});});
// lock scroll position, but retain settings for later
function lockScroll(){
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
}
function unlockScroll(){
// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1]);
}
lockScroll();
$(".bruce").fadeTo(3000, 1, function() {
$(".question").animate({"opacity": 1}, "fast");
$(".question").delay(4500).animate({"opacity": 0}, "fast", function() {
$(".bruce").fadeTo(2500, 0);
$(".bruce2").delay(1700).fadeTo(50, 1);
$(".shake").delay(1700).fadeTo(50, 1, function() {
$(".solution").delay(1600).animate({"opacity": 1}, "fast");
});
});
});
setTimeout(function() {
$(".crowTree").delay(250).animate({"opacity": 0}, 200);
$(".flyingCrow").delay(350).animate({
width: "1215px",
height: "860px",
marginLeft: "-130%",
marginTop: "300px"},
{
duration: fC_duration,
queue: false,
easing:'easeOutInQuad'
});
$(".raiseWings").animate({"opacity": 1}, "fast", function () {
$(".raiseWings").delay(rW_delay).animate({"opacity": 0}, "fast");
});
$(".upFlap").delay(uFout_delay).animate({"opacity": 1}, "fast", function() {
$(".upFlap").delay(uFin_delay).animate({"opacity": 0}, "fast");
});
$(".midFlap").delay(mF_delay).animate({"opacity": 1}, "fast", function() {
$(".midFlap").animate({"opacity": 0}, "fast");
});
$(".downFlap").delay(dF_delay).animate({"opacity": 1}, "fast", function() {
$(".downFlap").animate({"opacity": 0}, 1, function() {
$(".midFlap").animate({"opacity": 1}, 1, function() {
$(".midFlap").delay(100).animate({"opacity": 0}, 1, function() {
$(".upFlap").animate({"opacity": 1}, 1, function() {
$(".solution").animate({"opacity": 0}, "fast");
});
});
});
});
});
setTimeout(function() {
$(".upFlap").animate({"opacity": 0}, 1, function() {
$(".grabCard").animate({"opacity": 1}, 1, function() {
$(".grabbedCard").animate({"opacity": 0}, 1, function() {
$(".hand, .bruce2").fadeTo(b2_delay, 0);
});
});
});
},fCgC_sync);
setTimeout(function() {
unlockScroll();
$('html, body').animate({scrollTop:$(document).height()}, 2000);
},fC_duration);
},bFc_sync);
});