Develop Reference

jquery: a better way to tie an animation to scrollbar position

var AddFootnoteScrollIndicator = function(){
$('.mobileFootnote').on('scroll touchmove', function (event) {
var scrollTop = that.$mobileFootnote.scrollTop();
if (scrollTop <= 20){
var opacity = 1 - (scrollTop/20);
$('.scroll-down-indicator').css({'opacity': opacity });
}
});
};
As the user scrolls down, the indicator slowly fades out until it is gone. They scroll back up, the indicator slowly re-appears. They stop in the middle, the indicator is half-visible.
Code works fine, but modifying the opacity via .css() seems expensive. Is there a more clever way of doing this via css or...
I don't want to delay the .on() polling because the animation needs to respond quickly to the scroll.
Any ideas?

When it comes to scroll events, modifying the css via javascript is the only way to go. There is not a way with pure CSS to detect scroll positions like you can with media queries and screen sizes.
The jquery css() function is setting the element.style.opacity property under the hood. You are only one short abstraction layer from the actual element property, so it is not "expensive".
The most costly part of that call would be the $('.scroll-down-indicator') selector, as it has to perform a DOM traversal to find elements with the class name.

What is the cleanest way to animate without .animate() jQuery?

I had a nice idea, namely to use the 'stroke-dasharray' CSS-attribute that can be used on SVG objects, to stroke the paths on the page, giving it a nice artistic way for shapes to appear.
It works perfectly and is supported by most modern browsers as well as phones.
A nice jsfiddle of what I've made can be found here: http://jsfiddle.net/G6ECE/
The code that makes the whole thing tick right now:
num=0;
setInterval(function(){
updateStroke(num);
num+= 0.2;
}, 1);
function updateStroke(num){
// stroke-dasharray is a list of two or more numbers. In this example, percentage values are used to make all paths fully stroked at the end of the animation, irregardless of path length.
$('svg path').css({stroke:'#00FF00','stroke-dasharray':num+'% '+(100-num)+'%'});
}
Obviously this is a very basic, ugly way to animate something.
I want to customize the animation a little: I want to be able to add a custom animation length and also use different easings. Unfortunately, the jQuery $().animate() function that I'd normally use to animate CSS attributes, does not support non-numeric values.
As stroke-dasharray uses two or more numeric(pixel or percentage) values to work, I need an alternative for .animate()
What would be the cleanest way to do this? (with using as much existing jQuery functionality as possible, and as little as possible re-inventing an animation framework)

What about CSS transitions? They also have a better performance than jQuery animations.
http://www.w3schools.com/css/css3_transitions.asp
But be sure not to use both for the same property as jQuery animations interfere with CSS transitions.

Recently, I have been working with a nice robust cross-browser javascript animation object. Once you understand the way it is used, it becomes quite seamless for all or your SVG animations. It can be attached to any svg element and control associated values.
There are some examples that show the various choices of animation performance(linear, quadratic, ease,etc) at:
http://www.svgDiscovery.com/
Below is the object:
var AnimateJS=function(options){
this.options=options
var start = new Date
var iT = setInterval(
function(){
var timePassed = new Date - start
var progress = timePassed / options.duration
if (progress > 1) progress = 1
this.progress=progress
var delta = options.delta(progress)
options.output(delta)
if (progress == 1)clearInterval(iT);
},options.delay)
}

AJAX loading objects/images - makes jQuery animations choppy

I am building a website that has a few animations when you load the home page (for example, the main logo and a few menus slide in from the sides of the screen). Simultaneously, I am also using AJAX in the background to start to load some images that might be viewed later. The problem with this is that when the images are loading, the animations become quite choppy. Is there any way to stop this? Or maybe give the AJAX function a lower priority so that it doesn't try to do anything when an animation is running?
Here is the current script I'm using to load these images:
$('.lightbox-container.first').load('/images/first_set/', function(){
$('.lightbox-container.second').load('/images/second_set/', function(){
$('.lightbox-container.third').load('/images/third_set/', function(){
$('.lightbox-container.fourth').load('/images/fourth_set/', function(){
$('.lightbox-container.fifth').load('/images/fifth_set/', function(){
$('.lightbox-container.sixth').load('/images/sixth_set/');
});
});
});
});
});
An all of my animation function look something like:
$('.third-section').animate({ 'opacity': '1', 'height': '200px', 'padding-top': '20px', }, 500);

The problem
Since all your ajax and js animations run on the same browser thread, you are bound to have this problems. You are reaching the limits of your CPU, which causes the choppiness.
How to solve this
Use CSS3 transforms. Those are hardware accelerated in all modern browsers and run on a separate threads, so their performance is generally not affected by ajax calls. Since you said you only slide things around, I think this would be the ideal solution for you. There is a great article about it here:
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Your case
So to actually make this work for you. Leave the ugly ajax calls as they are for now. Instead of using jQuery animate, you need 2 states - the initial, which positions the slide away and one with an extra class, which positions your slide in it's target place.
All you have to do is add the class to the slide and it will nicely come in place. Theory is simple.
Sample
Your initial state could be something like this:
.slide {
transform: translate(-400px, -200px);
transition: all 5s;
}
And the one to show in place:
.slide.show {
transform: translate(0px, 0px);
}

Fx on JavaScript: How to fade stuff, etc without frameworks?

I would like to learn how to do fade, and similar effects on JavaScript. I often get answers, like why not use jQuery, Mootools, etc ? Well, I want to learn how stuff works, then I won't mind using any of these frameworks.
I'm currently learning about making changes on the DOM, so, I've read a lot of stuff on this theme. Also, I've read about Reflow, still, I didn't find any cool stuff on Repaint, but, I'll keep searching.
From seeing source files etc, I see a few methods, that I don't know if they've created or are Core methods of JS.
My question is, is there any resource where I can learn all this neat stuff like smooth position change, fading elements trough opacity or whatever, etc?

Take a look at emile.js. It's brand-spanking new. Great way to learn how to do your own.
Introduced at the recent jsconf conference. Written by Thomas Fuchs (script.aculo.us).
http://github.com/madrobby/emile
Émile Stand-alone CSS animation
JavaScript mini-framework
Doesn't need
a JavaScript framework
Full set of CSS
properties for animation (length-based
and colors)
Easing and callbacks
Less
than 50 lines of code
Get updates on
Twitter: http://twitter.com/emilejs

here's an example that works in firefox and chrome. ie doesn't respect the opacity style.
var ELEMENT;
var STEPS;
var INTERVAL;
var COUNT;
var TIMERID;
// 5 * 200ms = 1 second
STEPS = 5;
INTERVAL = 200;
function Button1_onclick() {
ELEMENT = document.getElementById("foo");
COUNT = STEPS - 1;
TIMERID = setInterval(Fade, INTERVAL);
}
function Fade() {
ELEMENT.style.opacity = String(COUNT / STEPS);
COUNT--;
if (COUNT < 0) {
clearInterval(TIMERID);
TIMERID = 0;
}
}
setInterval and clearInterval are standard js functions. they will execute the given function every x milliseconds. in our case we kill it when we've hit 0 opacity.
sliding a window is a similar process. you'd set the left/right/top/bottom style instead of opacity.

Fading using javascript is basically modifying opacity of an element programmatically. The "smoothness" is done by using timers. Same for position/size changes. You need to read up on css to understand what style properties of an element you have to control using javascript for the effect you want.
If you are really curious, you can dive into the source of yui in github: http://github.com/yui

Using jQuery for alternating png transition

Very basic question. I have a very simple web design utilizing a png with transparency, overlaying another base image. The idea here is that it cycles visibility continously, fading in quickly, displaying for a longer interval, fading out quickly, and remaining invisible for an equal longer interval, basically replicating the behavior of an animated GIF from back in the day. The png starts with display set to none.
My problem is jQuery doesn't seem to have a "pause" or "delay" event handler to help here. There are numerous plugins filling the gap, but I'd rather not include one if there's a simple way that I'm missing. That might require falling back on setInterval or setTimeOut, but I'm uncertain of the syntax to do that.
What I want schematically is something like:
--loop start--
$("#pngOverlay").fadeIn(1000);
(5000 delay) // using setTimeout or setInterval if jQuery method unavailable
$("#pngOverlay").fadeOut(1000);
(5000 delay)
--loop repeat--
The following does the behavior once, so I guess if this could be wrapped in a loop it might work, but it doesn't strike me as elegant or the right way.
setTimeout(function() {
$("#pngOverlay").fadeIn(1000);
}, 5000);
setTimeout(function() {
$("#pngOverlay").fadeOut(1000);
}, 10000);
Thanks for any suggestions. I would just use GIFs, but need the transparency for this. (In the old days, we used animated GIFs and we liked them...)

<script language="JavaScript" type="text/javascript">
function showimage(){
$("#pngOverlay").fadeIn(1000);
setTimeout('hideimage()',5000);
}
function hideimage(){
$("#pngOverlay").fadeOut(1000);
setTimeout('showimage()',5000);
}
$(document).ready(function() {
showimage();
});
</script>

Something like this?
setInterval(function()
{
var elm = $('#pngOverlay');
if (elm.is(':hidden'))
elm.fadeIn(1000);
else
elm.fadeOut(1000);
}, 5000);

How about using an animated PNG?

One trick I have seen is to have jQuery carry out an animation for 5000 milliseconds that has no visible effect.
$("#pngOverlay").animate({opacity:1}, 5000);
If the opacity of the item was 1 to start with then it does not have a visible effect but it does pause for 5 seconds.