We Keep Coding

Play through pinned elements in superscrollorama

I am building a Parallax website using SuperScrollorama which have some animation frame by frame using jquery and css3...
But after ending up doing so i am stuck in a problem, i am trying to navigate the pages using some scroll plugin...
I have tried Basic jquery using scrollTop event, using Jquery ScrollTo and using Tween Lite ScrollTo plugin to navigate through pages but nothing seems to work...
The issue i get after goggling it is if pages are pinned together as position:fixed; and pages doesnot scroll to that position and stuck between...
With Jquery ScrollTo, my code:-
$('.menus a').click(function(e){
e.preventDefault();
$.scrollTo(this.hash, 2000, {
easing:'easeInOutExpo',
offset:3000,
axis:'y',
queue:true
});
});
With basic scrollTop jquery, my code:-
$('a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
Currently my code works like this:- http://jsfiddle.net/tFPp3/6/
As you can see in my demo, the scroll stuck between before reaching the exact position through hash...
What is the solution if i have to play through the pinned elements in Superscrollorama?

You'll have to do 2 animations : one to reach the ancher offset and then, after superscrollorama added new element for animation and recalculate the document height, do the second animation to reach the correct key frame on that page (that you fixed at offset 3000 of that section).
$(function(){
var hashes = [];
$('.menus a').each(function(){
hashes.push(this.hash);
});
console.log('hashes:', hashes);
$('.menus a').click(function(e){
e.preventDefault();
var h = this.hash;
var pageTop = $(h).offset()['top'];
console.log('pageTop=',pageTop);
$.scrollTo( pageTop+1, 2000, {
easing:'easeInExpo',
axis:'y',
onAfter:function(){
setTimeout(function(){
console.log('hashes:', hashes);
var id = hashes.indexOf(h);
console.log('hashes['+(id+1)+']=', hashes[(id+1)]);
var nextPageTop = $(hashes[id+1]).offset()['top'];
console.log('nextPageTop=', nextPageTop);
var keyOffset = pageTop + 3000;
console.log('keyOffset=',keyOffset);
if(keyOffset < nextPageTop ){
$.scrollTo( keyOffset, 2000, {
easing:'easeOutExpo',
axis:'y'
});
}
},100);
}
});
});
});
Note that each section offset changes constantly so, before launching the second animation, we have to test that we are not scrolling till the next section again. We also need a little delay here to let superscrollorama make its sauce before testing respective offsets (saddly it doesn't seem to provide an event to do so).

I had the same issue as you. Here's how I went about fixing it....
First of all we know that Superscrollorama adds a spacer pin before your element, it sets the height of the element which defines how long the user has to scroll through a section (the duration)....So in theory all we have to do is add up all the pin heights that happen BEFORE the element you want to scroll to and then offset from the top of that element...
What I did was....
Find out what element you want to scroll to. Check how many supersrollorama-pin-spacers there are before that pin, work out the heights of all of the pins and then offset it to your initial scrollTo function.
pin = $('#pin-id').prev(); //find the spacer pin
prevPin = pin.prevAll('.superscrollorama-pin-spacer'); //find all the pins before this
heights = []; //create an array to store the pin heights
$.each(prevPin, function( index, value ) {
value = $(this).attr('height'); //get each height
heights.push(value); // push it to array
});
//use eval to join all the heights together
heights = eval(heights.join("+"));
Now we have the height so lets scroll to it.....
TweenMax.to($('html,body'),1, { scrollTop:heights, });
Good Luck! I hope this helps you.

I have had a similar issue and found that janpaepke on the superscrollorama project added an additional toggle to make this easier.
You can manually add the spacers so you don't need to make adjustments by setting the pushFollowers flag in your pin to false.
Example JS
controller.pin($('#pin-id'), 200, {
anim: new TimelineLite().append([TweenMax.fromTo( $('#pin-id'), 2, {css:{opacity: 1}}, {css:{opacity: 0}})]),
offset: 0,
pushFollowers: false
});
Example HTML
<div id="pin-id">
Bunch of Content
</div>
<div style="padding-top: 200px"></div>

JS: Animate function

I have the element .menu on my page, and one of my JS libraries has xslide attribute, which gives many options like draggable, overlay, radius etc.
$(document).ready(function(){
$('.menu').xslide({
draggable: true,
overlay: 'rgba(255,30,100,1)',
radius:0
});
});
The code above sets the properties in a fixed way, but I like to give them some smooth transition, so how do I use .animate thing by jQuery here? e.g I want radius to grow gradually into 20 in a few seconds when .menu clicked. So I believe my code should start like:
$('.menu').click(function(){
Now what? When I try something like:
$(this).animate.xslide({radius:'20'},1000)
It does not work, can you help me? :) I'm sorry if I'm being annoying by asking these trivial things but I'm so new to it and I'm trying very hard. ^^

jQuery animate uses CSS styles to animate. If the plugin has an extension to animate radius, it is possible, otherwise animate will not work. Is the radius a CSS property?
If it would be a border-radius it will be something like:
$("#selector").animate({
"border-radius" : "10px"
}, 500); // 500 MS

KineticJS animation with JQuery

I am new in KineticJS and I am stacked. I want to use a simple animation with opacity but I found out that there is not so "simple" as it seems. I read the doc about animations with KineticJS (you won't say simple about this tutorial). What I want to know Is there a simple method to animate things with KineticJS like JQuery or JCanvaScript has? for example
this.animate({
opacity:0,
x: 50
}, 500);
something like this?
If there is not can we use KineticJS with JQuery to make animations simple? I found out THIS project that has very interesting piece of code:
$(logo.getCanvas()).animate({
opacity: 1,
top: "+=50px"
}, 1000);
so guys what do you think? Is it buggy to use this method?

If you just have to do your opacity animation : you should stick to JQuery which will hide the computations done for the animation (and what you were pointed to is a good solution).
If you want more controls over your animation : go with KineticJS.
Through, I think you will have more issues trying to use JQuery animations and KineticJS layers at the same time rather than using only KineticJS (and Kinetic.Animation is pretty simple once you have understand how to play with it)
edit: Quick How-To for animations :
So, as you may have seen, in Kinetic, you do not give the final position like in JQuery : you have an access to a function which is called at each frame of the animation and all the logic have to be placed in it :
<script>
// you should have an object yourShape containing your KineticJS object.
var duration = 1000 ; // we set it to last 1s
var anim = new Kinetic.Animation({
func: function(frame) {
if (frame.time >= duration) {
anim.stop() ;
} else {
yourShape.setOpacity(frame.time / duration) ;
}
},
node: layer
});
anim.start();
</script>

create a div that would grow as if it is a bubble

I have a circular background image inside a div. to start off with i need to not have the 'bubbles' to display. and after arriving on that page the bubble would grow into place like a bubble or in other words 'pop' into place. I have no idea how i would go about creating this in jquery. this also needs to work on all browsers including ie7+ any help would be grateful

jQuery show() function
jQuery animate
These should give you an idea.
You might also consider using images to illustrate what you're trying to achieve.
I recommend building the content you need, and then asking people how you can change it to get the results you want. That will be easier for people to answer.

For the popping effect you really need to animate 4 different styles, depending on your CSS preference you can animate top and left or if you're using margins (why?) margin-top and margin-left, this will give you the effect of the "bubble" expanding center outwards instead of top left to bottom right.
This is a jQuery example for top/left
var newHeight = 300;
var newWidth = 300;
jQuery('#element').animate({
"top":newHeight/2,
"left":newWidth/2,
"height":newHeight,
"width":newWidth,
"opacity":1
}, 'fast', easeInOutCirc);
You may find the easing effects here: http://gsgd.co.uk/sandbox/jquery/easing/
its worth noting you should be a little more specific with your questions, we're not mind readers :)

This is a simplified version of this fiddle where I did something very similar to what you're doing. Hope it helps.
function(){
var position = $('#bubbleposition'),
bubble = $('#bubble'),
startRadius = 200,
newRadius = 400,
startleft = 10,
starttop = 10,
endleft = 50,
endtop = 50;
position.css({left: startleft, top: starttop, 10)});
bubble.css({height: startRadius, width: startRadius});
position.animate({left: endleft, top: endtop});
bubble.animate({height: newRadius, width: newRadius}, 400);
}
<div id='bubbleposition'>
<div id='bubble'>
Hello!
</div>
</div>

jQuery - Can I animate css properties? Background-image particularly

I know I can fade in and out divs and elements, but can I animate properties as well?
I thought about this just now when changing background-image property of a certain div. And thought it'd be cool if the background image was faded in as well ;)
Here's the code I'm using to replace background image. But can it be animated?
var originalBG = $('#wrapper').css('background-image');
$('.bggallery_images img').hover(function () {
var newBG = "url('" + $(this).attr('src');
$('#wrapper').css('background-image', newBG);
}, function () {
$('#wrapper').css('background-image', originalBG);
});

jQuery has the animate() method that does exactly that.
Check out the examples in the manual, they should show you everything you need.

JQuery UI is a plug in that extends the animation function to animate color if that's what you're looking to do with the background. Basically if JQuery doesn't do it, there's most likely a library that extends it to have that functionality.