Develop Reference

Animate div using jQuery and changing the Width

I'm trying to slide in a div into the page while the page is loaded completely, I used CSS before, but it wasn't smooth at all, so i switched to use jQuery.
It's very smooth but i have a small issue which i believe somebody with more experience could solve it very quickly.
If you look at my output, the effect is not very seamless and it seems it stuck at some point.
Because i'm animating the div within change the width, i'm sure there is a better way to do that.
Here is my code :
$(document).ready(function() {
$("#thumbnails").animate({
opacity: 1,
width: "800px",
}, {
duration: 500,
specialEasing: {
width: "linear"
}
});
});
Here is the Output link
http://jsbin.com/cuvaxuji/1

Are you trying to slide the div ... for sliding make "#thumbnails" position absolute and write
$("#thumbnails").animate({
opacity: 1,
left: "20px",
}

Choppy jQuery Scrolling in Firefox

I have a small snippet of jQuery that I'm using to move my nav bar when the user scrolls then have it stick 75px from the top of the page.
In IE9 the scrolling is super smooth, but in Firefox it's very jerky and choppy.
Here's my code:
jquery:
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
$('div.hnav').css('margin-top',Math.max(-235,0-scrollTop));
});
css:
div.hnav {
position: fixed;
top: 300px;
height: 40px;
}
Any suggestions?

Don't use margin-top. Changing the margin values often causes reflow. Why not just use top, as you've already got that set up to be positioned anyway?

I've found often the solution is to let the scrolling be handled by the GPU. One way you can force this to happen is by adding
webkit-transform:translate3d(0,0,0)
to the element you are scrolling. You can see what is being handled by the GPU vs CPU by opening the page in Chrome->Developer Tools->General and selecting "Force accelerated compisiting" and "Show composited layer borders". That will cause an orange border to appear around anything being handled by the GPU.

I suggest you use this approach instead: http://jsfiddle.net/Uxn9f/
Updated CSS
div.hnav {
position: absolute;
top: 300px;
height: 40px;
}
Swapped from fixed to absolute positioning. This allows the element to move with the scroll of the page.
Changed JQuery
$(window).scroll(function () {
if ($(this).scrollTop() > 235) {
$('div.hnav').css({
'position': 'fixed',
'top': 75
})
} else {
$('div.hnav').css({
'position': 'absolute',
'top': 300
})
}
});
Essentially what we're doing is checking the current scroll of the page. When we reach a certain point (235px) we will "lock" the .hnav to be 75px from the top of the viewport by changing its positioning (type and dimension).
If the user scrolls back up past out magic 235px mark, reset the positioning.

Using SuperScrollorama to drop image in from top of page

I'm using SuperScrollorama to trigger a lot of animations on a single page (scrolling) website. All of the images and text that slide in from the left or right work perfectly. The problem is when I try to make an image drop in from the top of the screen the image will bounce up and down the whole time the user scrolls until they finally get down to the point where the image is supposed to "sit" (It basically goes back to it's original position and then down to where it's supposed to stay and then back up again and so on)... Here's my relevant code:
HTML:
<div id="about-pin-div">
<div id="pin-frame-pin" class="pin-frame"><img src="img/about-products.png" style="width: 55%;"></div>
</div>
CSS:
#about-pin-div { position: relative; width: 100%; height: 100%; left: -5%; overflow: hidden; }
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.pin-frame img { margin-top: -200px; }
JAVASCRIPT:
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween('#about-pin-div', TweenMax.from( $('#about-pin-div'), .5, {css:{bottom:'1000px'}, ease:Quad.easeInOut}), 0, 600);
// set duration, in pixels scrolled, for pinned element
var pinDur = 1000;
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
pinAnimations
.append(TweenMax.from($('#pin-frame-pin img'), .5, {css:{marginTop:80}}))
// pin element, use onPin and onUnpin to adjust the height of the element
controller.pin($('#about-pin-div'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#about-pin-div').css('height','100%');
},
onUnpin: function() {
$('#about-pin-div').css('height','100%');
}
});
});
Thanks in advance for any help!

I think you are having a number of issues here and I will try to point out some problems that I have had with this plugin.
(1) When in doubt turn off pushFollowers for your pins.
In an effort not to continue to repeat myself
Play through pinned elements in superscrollorama
janpaepke did an excellent job in writing this work around because he had the same issues himself.
(2) Never use margins for adjusting the position, IE handles margins badly sometimes depending on the context won't work the way you want it to.
When to use margin vs padding in CSS
Does a better job at explaining it then I can.
(3) I don't understand the need to trigger on pin functions to adjust the height of #about-pin-div. You are just resetting the starting value over and over that I don't see ever gets changed. Unless you were trying to compensate for the automatically adjusting of pinned elements but the work around in (1) should fix that.

css animation moves page - fix page scroll position on current element with css?

Given the following simplified problem:
foreach i in 1..100 do
<div onclick="$("div").attr('class','expand');">block i</div>
And this css:
div {
height: 20px;
transition: height 0.5s;
}
div.expand {
height: 50px;
}
Now when I click on a div, every div get's the class "expand". This means that the page will expand. However, everything will scroll down. That means that if I click on div 50, it will probably not be in my window anymore and I have to scroll down to see it again.
I would love to make the div that I clicked on stay in the center of the screen. Is this possible with CSS, or do I need JS?

it is possible ... you can use jQuery's .scrollTop() method like this:
$(window).scrollTop( $('.your_element').offset().top + $('.your_element').height() - $(window).height() );

This function scrolls the page according to the position of mouseclick:
$(document).ready(function(){
$('div').click(function(e){
var offsetY = e.pageY - $(window).scrollTop();
$('div').attr('class','expand');
$(window).scrollTop($(this).offset().top-offsetY);
});
});
Example on jsFiddle

How to move an entire div element up x pixels?

I want to reposition an entire div and its contents up about 10-15 pixels.
How can I do this?
Note: this is slider element, so when I click a button the slider slides down. Once it is finished I want to reposition it up about 15 pixels.

$('#div_id').css({marginTop: '-=15px'});
This will alter the css for the element with the id "div_id"
To get the effect you want I recommend adding the code above to a callback function in your animation (that way the div will be moved up after the animation is complete):
$('#div_id').animate({...}, function () {
$('#div_id').css({marginTop: '-=15px'});
});
And of course you could animate the change in margin like so:
$('#div_id').animate({marginTop: '-=15px'});
Here are the docs for .css() in jQuery: http://api.jquery.com/css/
And here are the docs for .animate() in jQuery: http://api.jquery.com/animate/

$('div').css({
position: 'relative',
top: '-15px'
});

In css add this to the element:
margin-top: -15px; /*for exact positioning */
margin-top: -5%; /* for relative positioning */
you can use either one to position accordingly.

you can also do this
margin-top:-30px;
min-height:40px;
this "help" to stop the div yanking everything up a bit.