We Keep Coding

Fullpage.js with GSAP - Callback afterLoad animation

I am trying to add some animations to fullpage.js with GSAP and have a question regarding the afterLoad function. Here's my code (with codepen link included)
$("#wrapper").fullpage({
verticalCentered:true,
scrollingSpeed: 1000,
sectionSelector: "section",
afterLoad: function(anchorLink, index) {
var loadedSection = $(this);
if (index == 2) {
TweenMax.from(".second h1", 1, {opacity:0, left:"-20px"});
}
}
});
What I would like to do is, use the afterLoad function to animate (fadeIn / slideIn) elements of the current section. My codepen link is here.
I am able to do this successfully (pls see the second section of the pen, you'll see it fades in), but the problem is it doesn't start with the animation. It has a delay before the animation starts, so during that delay, the elements need to be hidden (Not sure how to do this, I tried visibility:hidden to start with, it didn't work).
I am able to achieve the same thing with onLeave (but from 2nd section onwards).
Looking forward! Cheers!
UPDATE
I managed to figure it out. Thanks for Alvaro for chipping in a prompt reply. Here's the updated code:
$("#wrapper").fullpage({
verticalCentered:true,
scrollingSpeed: 1000,
sectionSelector: "section",
afterLoad: function(anchorLink, index) {
var loadedSection = $(this);
if (index == 1) {
$(".second h1").hide();
}
if (index == 2) {
$(".second h1").show();
TweenMax.from(".second h1", 1, {opacity:0, left:"-20px", delay:0.5});
}
}
});

jQuery animate left over time

I'm trying to make a div slide to the right by increasing the position left I want it to slowly go from the left hand side to the right and then loop back to the start. At the moment I'm just trying to animate the position so it doesn't jump instantly-
$('#pig').css('left', 200).animate(300);

The syntax is
$('#pig').animate({left: 200}, 300);
jQuery.animate documentation
To add animations in a queue you can either just chain them
$('#pig').animate({left: 200}, 300).animate({left: 0}, 300);
FIDDLE
or use the callback argument, or use jQuery's queue to set up as many animations as you'd like in a queue
$('#pig').queue(function() {
$(this).animate({left: 200}, 300);
$(this).animate({left: 0}, 300);
}).dequeue();
FIDDLE
or to make it recursive, you can use a combination of both
(function ani() {
$('#pig').queue(function() {
$(this).animate({left: 200}, 300);
$(this).animate({left: 0}, 300, ani);
}).dequeue();
}());
FIDDLE

Adeneo's answer is correct, but you also asked to loop back to the start. Assuming you want the div to go back to its original position, you need to chain another animation like this:
$('#pig').animate({left: 200}, 300, function() {
$('#pig').animate({left: 0}, 300);
});

setTimeout(function () {
$('#pig')
.css('left', 200)
.animate(300)
}, 1000)

How to track element movement and trigger function at specific spot?

I have a #ball that when clicked uses jquery animate to move down 210px using this code:
$('#ball').click(function() {
$(this).animate({
top: '+=210px'
}, 500);
setTimeout(crack, 400);
});​
currently Im using Timeout to trigger the next function which is "crack".
Instead I want to track the movement of #ball and when its css top = 210px I want to trigger the function crack(), how can I do this?
I saw in a somewhat similar post that the Step function might be what I'm looking for, but I am not sure how to approach that solution based on the info provided at http://api.jquery.com/animate/
Look at Demo: http://jsfiddle.net/EnigmaMaster/hbvev/4/

I am not sure why you want to use a tracker if you know that the ball will reach the box in 210px.
If you want to get rid of setTimeout, then use the .animate callback function which will be called when the ball reaches the box.
$('#ball').click(function() {
$(this).animate({
top: '+=210px'
}, 500, crack); //<== crack will be called after ball animation
});​
DEMO
Incase if you want to call crack when the ball touches the box and still continue the movement of box then you can execute it 2 steps like below,
$('#ball').click(function() {
$(this).animate({
top: '+=180px'
}, 400, function() {
crack();
$(this).animate({
top: '+=30px'
}, 100);
});
});
Also check this version for fun in slow motion http://jsfiddle.net/skram/hbvev/8/

If you truly want to do something based on the position of the ball, then yes, step is probably the best way to go:
$('#ball').click(function() {
$(this).animate({
top: '+=210px'
}, {
duration: 500,
step: function() {
if($(this).offset().top > 208) {
crack();
}
}
});
});
Demo: http://jsfiddle.net/qJjnN/1/
Now, there are a couple of caveats:
There will be a possible performance hit.
The position at each step will not necessarily be a whole number, and the object will not exist at every pixel between the start and stop location.
step is not called on the final position, so you cannot actually check for 210 if it is the final location.
Taking those into mind, you will not be able to check for the exact position of 210px. Instead, you will want to watch when it passes a certain position and only trigger crack at that point and not every point after:
$('#ball').click(function() {
var cracked = false;
$(this).animate({
top: '+=210px'
}, {
duration: 500,
step: function() {
if($(this).offset().top > 208 && !cracked) {
cracked = true;
crack();
}
}
});
});
Demo: http://jsfiddle.net/qJjnN/2/
The step function also has parameters now and fx that can be used to see the current value of the css being animated. step is called for each step of each css attribute being animated. So, you have to be careful using those, because you need to look at fx to see what attribute value you are looking at (if you are animating more than one, i.e. top and left).
$('#ball').click(function() {
var cracked = false;
$(this).animate({
top: '+=210px'
}, {
duration: 500,
step: function(now, fx) {
if(fx.prop != 'top') {
return;
}
if(now > 208 && !cracked) {
cracked = true;
crack();
}
}
});
});

jquery menu slides in and bounces

http://jsfiddle.net/E6cUF/
The idea is that after the page finished loading the grey box slides left from behind the green box, if possible bounce a little.
Edit: made a new version based on changes people made to the jsfiddle and the comment from Nicola
http://jsfiddle.net/RBD3K/
However the grey one should be behind the green one and slide from right to left so it appears

To have it bounce you are missing two things i think:
1) you need to load jquery UI.
2) put the bounce effect after the animate effect:
$('#test').click(function() {
var $marginLefty = $('.left');
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() :
0
}).effect("bounce", { times:5 }, 300);
});
updated fiddle: http://jsfiddle.net/nicolapeluchetti/E6cUF/4/

Try this . Not sure if this is what you want.
$('#test').click(function() {
var $marginLefty = $('.left');
var $marginRight = $('.right');
$marginLefty.animate({
marginLeft: 0
},{ duration: 200, queue: false });
$marginRight.animate({
marginLeft: 100
},{ duration: 200, queue: false });
});
Update: from your updated fiddle,add for .right position :absolute;z-index:1000 as css
http://jsfiddle.net/E6cUF/11/

fadeOut() and slideUp() at the same time?

I have found jQuery: FadeOut then SlideUp and it's good, but it's not the one.
How can I fadeOut() and slideUp() at the same time? I tried two separate setTimeout() calls with the same delay but the slideUp() happened as soon as the page loaded.
Has anyone done this?

You can do something like this, this is a full toggle version:
$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
For strictly a fadeout:
$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');

Directly animating height results in a jerky motion on some web pages. However, combining a CSS transition with jQuery's slideUp() makes for a smooth disappearing act.
const slideFade = (elem) => {
const fade = { opacity: 0, transition: 'opacity 400ms' };
elem.css(fade).slideUp();
};
slideFade($('#mySelector'));
Fiddle with the code:
https://jsfiddle.net/00Lodcqf/435
In some situations, a very quick 100 millisecond pause to allow more fading creates a slightly smoother experience:
elem.css(fade).delay(100).slideUp();
This is the solution I used in the dna.js project where you can view the code (github.com/dnajs/dna.js) for the dna.ui.slideFade() function to see additional support for toggling and callbacks.

The accepted answer by "Nick Craver" is definitely the way to go. The only thing I'd add is that his answer doesn't actually "hide" it, meaning the DOM still sees it as a viable element to display.
This can be a problem if you have margin's or padding's on the 'slid' element... they will still show. So I just added a callback to the animate() function to actually hide it after animation is complete:
$("#mySelector").animate({
height: 0,
opacity: 0,
margin: 0,
padding: 0
}, 'slow', function(){
$(this).hide();
});

It's possible to do this with the slideUp and fadeOut methods themselves like so:
$('#mydiv').slideUp(300, function(){
console.log('Done!');
}).fadeOut({
duration: 300,
queue: false
});

I had a similar problem and fixed it like this.
$('#mydiv').animate({
height: 0,
}, {
duration: 1000,
complete: function(){$('#mydiv').css('display', 'none');}
});
$('#mydiv').animate({
opacity: 0,
}, {
duration: 1000,
queue: false
});
the queue property tells it whether to queue the animation or just play it right away

Throwing one more refinement in there based on #CodeKoalas. It accounts for vertical margin and padding but not horizontal.
$('.selector').animate({
opacity: 0,
height: 0,
marginTop: 0,
marginBottom: 0,
paddingTop: 0,
paddingBottom: 0
}, 'slow', function() {
$(this).hide();
});