Develop Reference

JS content not working after a page transition using Barba.JS

I am using Barba.js and GSAP to create page transitions for my website. After watching a few tutorials and fiddling around a bit, I managed to create a slide-transition between two pages. Thing is I've also got other javascript content which is for other functionality elements on each page. On the first page load, everything seems to work fine.
I then click on a link to transition to the next page, the transition goes well but suddenly none of the elements I had coded in the very same JS file work anymore.
I can still transition perfectly between each page but none of the other JS content seems to be working. I'm not getting any errors in the console so I have no idea what's exactly happening here.
Here's what my Barba initialization looks like.
barba.init({
sync: true,
transitions: [{
async leave(data) {
const done = this.async();
animationLeave();
await delay(1000);
done();
},
enter(data) {
animationEnter();
},
once(data) {
animationEnter();
}
}, {
name: 'home-transition',
to: {
namespace: ['home']
},
async once(data) {
homeAnimation();
}
}]
});
The AnimationEnter, AnimationLeave and HomeAnimation methods just link to GSAP animations. For example here's what the AnimationLeave one looks like:
function animationLeave() {
var tl = gsap.timeline();
tl.to('.loading-screen', {
duration: 1,
width: '100%',
left: '0%',
ease: 'expo.easeInOut'
});
tl.to('.loading-screen', {
duration: .8,
width: '100%',
left: '100%',
ease: 'expo.easeInOut',
delay: .3
});
tl.set('.loading-screen', {
left: '-100%',
width: '0%'
});
}
Any help is appreciated!

I flipped the internet upside down looking for a solution to this very problem just a few weeks ago.
Essentially, all your JavaScript runs only once on the initial page load when you're working with BarbaJS. It doesn't get reinitialised once you transition from one page to another. This means that when you transition to another page, all JavaScript-powered animations on that new page won't work unless those animated elements existed on the first page loaded when the site is visited.
To get page-specific animations to work from one page to another after a transition, all of those animations have to be reinitialised. You can do this using global Barba hooks:
barba.hooks.beforeEnter(() => {
killEvents();
});
This code will run before the next page is shown between transitions. If you're using something like ScrollTrigger or an instance of a smooth scrolling library, you can kill those instances or else they'll just stick around and be a memory hog. If you're not, then there's no need to remove any events.
barba.hooks.afterEnter(() => {
addEvents();
});
This is the important part. After a transition, you can then re-add your animation events as shown here.
Another really important thing that helped me was initialising your DOM nodes inside the functions that returned or created your animations. If you simply initialise the DOM nodes once on the initial page load and not on each transition, your animation code will assume you're only animating the elements on the initial page even when the page has transitioned to another.
Some Greensock forum posts that helped:
https://greensock.com/forums/topic/26585-scrolltrigger-not-working-after-barba-transition/
https://greensock.com/forums/topic/24365-problem-with-killing-and-reinitialising-scrolltrigger-after-single-page-app-page-transition/
TL;DR, reinitialise your JavaScript on each page transition.

Hard Javascript/jQuery Animation (Spinner/Scroller)

Okay, I'm trying to make it so when you click a button it'll spin a div with it's randomized contents and it'll slow down on stop on a specified div, now I have no idea where to start,
Here is an example of what I'm trying to do,
https://www.youtube.com/watch?v=y7jjhLUKleg
Any idea how to start? what should my priority be, jQuery or Javascript?
Kind Regards
EDIT: I'm not asking for anyone to spoonfeed me code, I just need an idea on where to start.

The animation itself can be probably solved easily using JQuery Animate functions. The animation supports easing, and the "ease out" is what you need. With some CSS, you would create some kind of viewport, and move the elements from right to left until the animation stops.
Let me help you with some starting code: http://jsfiddle.net/dfevruws/1/
The animation command is very simple:
$(function() {
$( "#items" ).animate({
left: -2000
}, {
duration: 5000,
easing: "easeOutQuad"
});
});
Probably more interesting than this is how you handle the selected item, but this is a different story, you ask for the Animation.

jquery animate background-size onload

I'm working on a Wordpress site (it's in "coming soon" mode so I can't give a link) where the client wants a background image to zoom slightly. I figured I could achieve this easily with CSS animation, manipulating the background-size. It worked great!... except in Safari and IE.
Why not use an image and set the z-index and use scale(), you ask? Well, they only want the background on one post. And that means 'post', not 'page', otherwise I'd just set up a new page template and be done. It forced me to specify the background image on the individual post body class (body.postid-23.custom-background {...}).
So I need a way to animate the background-size, without hovering or clicking, as soon as the page loads. Anyone do this before? Any help is appreciated. I'm not a javascript/jquery coder, but I can use them well enough to make it work for my sites.

This is what you want:
$(function() {
$("yourSelector").animate({
backgroundSize: "100px 100px"
});
});

Just use the document.ready function in this way :
$(document).ready(function) {
$("selctorOfYourBackgroundImage").animate({
backgroundSize: "100px 100px"
});
});
As soon as the DOM has finished loading, the animation will occur!

This will fire once the page has finished loading.
$( document ).ready(function() {
console.log( "ready!" );
});
Not sure if you require the code in the middle aswell?

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);
}

Animating downwards with JS

I have several pages (including an 'include' php page which contains my menu links. And I also have a footer 'include' php page).
Basically, I thought of having this smooth animation, where my "pouch" as I call it, animates downwards. It's basically a slightly more fancy type of rectangle that has a width of 1000px. So, whenever I click on "Services" for example, it would animate slowly enough downwards.
Aside from the links on my pages, the order of what I currently have goes as follows: I have my scripts externalized, and I have text on each of my pages. So for the "Services" page for example, I have my text, followed by the "pouch". The "pouch" is on my footer 'include' php page.
This is the code I have for the animation. I have a similar code which works on another project which includes more coding. But, I assume this code here is correct. The question is, how can I make it that this code is triggered before loading the other page's text:
$('#services-fr-2').click(function(){
if ( $('#green-pouch-fr').height() == 580 ) {
$('#green-pouch-fr').animate({
'top':'800px',
'height':'500'
})
In other words, even though the text is on the next page, I would need the pouch to animate downwards, followed by the text appearing.

Try something like:
$.ajax(/* ajax stuff here */).done(function(data){
$('#green-pouch-fr').animate({
top: '800px',
height: '500'
}, 500, function(){
//run your text data here
}
});
});

The animate function accepts, as a parameter, a function to be invoked after the animation completes.
If this question is asking how to set the text only after the animation completes, you can do it like so:
$('#green-pouch-fr').animate({
'top':'800px',
'height':'500'
},
{
complete: function() {
$(this).text(pageContent);
}
}
);