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.

Sensitivity of mouseOver in a Jquery simple FishEye script

After having troubles with a jquery fisheye plugin I've decided to develop a similiar script by myself. (It's also a good practice).
Anyway , I wrote 2 jquery functions based on the Animate() function.
minimizeBubble
return the bubble to its default size
maximizeBubble
make the bubble bigger , higher and display another picture as well (a
title for that bubble)
jQuery.fn.maximizeBubble = function(){
$(this).animate({
marginTop: '-300px',
width: '300px',
}, {
duration: 200,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "inline");
}
});
}
jQuery.fn.minimizeBubble = function(){
$(this).animate({
//top: '+=5',
marginTop: '0',
width: '80px',
}, {
duration: 100,
specialEasing: {
width: 'linear',
},
complete: function() {
$(this).find("span").css("display" , "none");
}
});
}
I also wrote the next code:
I know that the .each() function in this case is not neccessery because
there's only one big bubble at a time.
$(document).ready(function() {
//First , the middle one will be big as default.
$('#auto_big').maximizeBubble();
//mouseOver - make it big , onMouseout - Stay Big (do nothing)
$('.dock-item2').mouseover(function() {
//mouseOver on another bubble- minimize the other one and maximize the current
$('.dock-item2').each(function(){
$(this).minimizeBubble();
});
$(this).maximizeBubble();
});
});​
(A jsFiffle for my code: http://jsfiddle.net/T7gCL/1/)
The problem , as you can see at: http://jsfiddle.net/T7gCL/1/embedded/result/ that
when you move your mouse to the next bubble , all the bubbles are starting to "get crazy".
1.Do you know what's the reason for this behaviour?
2.How can I solve it?
3.do you have any suggestions of how to improve my code (for instance: instead of each())?

Part of the reason there is so much hopping around is that you're positioning the images absolutely and then resizing them. I'm not sure what the application calls for but I would try floating them for now. The animation behavior is like a chain reaction which makes me draw the hypothesis that when the image resizes it is propagating the onMouseover event to the images it is overlapping. The floating layout may fix this.
Update
This works better but might not be exactly what you're trying to do
$('.dock-item2').mouseenter(function(event) {
event.stopPropagation()
$(this).maximizeBubble();
});
$('.dock-item2').mouseleave(function(event) {
event.stopPropagation()
$(this).minimizeBubble();
});
You still need to rework the way you're organizing the images in their containing div

Jquery finding the right easing function

Hi all im trying to create a loading animation with html and JQuery that looks like the windows phone 7 loading animation.
I have gotten this far
http://jsfiddle.net/b6L8M/5/
But the easing function does the opposite of what i want, i want it to go fast when its on the edges and then slow down when it comes to the center.
when looking at http://jqueryui.com/demos/effect/easing.html it does not seem that there is a built-in function for that, so how would i create that function?

If you split-up your animation into two parts you can ease-in to the center and ease-out of the center:
function moveDot(dotItem, delay) {
var dotItem = $(dotItem);
dotItem.delay(delay * 200).css('left', '0%').animate({left: '50%'}, 1000, 'easeOutCirc', function() {
dotItem.animate({left : '100%'}, 1000, 'easeInCirc', function () {
moveDot(dotItem[0], 0);
});
});
}
I also cached the $(dotItem) selection so it doesn't create a hiccup mid-animation while creating another selection (not a big chance of this happening but hey :) ).
Here is a demo: http://jsfiddle.net/b6L8M/13/

Sometimes, you have to use more than one animate function to do what you want.
I don't know how the windows phone 7 animation looks but I tried this according on what you said :
$(dotItem).delay(delay * 200).css('left', '0%').animate({left: '50%'}, 1000, 'easeOutQuart', function() {
$(this).animate({left: '100%'}, 1000, 'easeInQuart', function() {
moveDot(dotItem, 0);
});
});
The first one, easeOutQuart, is fast then slow down. The second is slow then accelrate.
I used the chaining system, but it makes the elements stop during some ms. You also can use a "delay" to do so without stop.

After fiddeling around in fiddler and using this post Help with custom jquery easing function i got it to work like i wanted
http://jsfiddle.net/b6L8M/24/ it's more or less identical to the WP7 loading!

jQueryUI Progressbar won't ease

When I apply the following code it sets the correct bar value but doesnt do any easing?
$("#myBar").progressbar({ value: 25, speed: 1500, easing: 'easeOutBounce'});
What am I missing, any help appreciated!
Thanks
Solution:
I kinda worked it out myself
$("#myBar").progressbar({ value: 25, speed: 1500, easing: 'easeOutBounce'});
was indeed invalid code (thanks Orenet!), using:
$('#myBar div').stop().animate({width: val + '%'},1000, 'easeOutBounce');
didn't work immediately as the div with the actual bar was hidden even initializing it before didnt work. At the moment i am just unhide it. any better solution?

I don't think you can use speed or easing with the default progressbar of jquery.
please read the progressbar documentation.

Solution:
I kinda worked it out myself
$("#myBar").progressbar({ value: 25, speed: 1500, easing: 'easeOutBounce'});
was indeed invalid code (thanks Orenet!), using:
$('#myBar div').stop().animate({width: val + '%'},1000, 'easeOutBounce');
didn't work immediately as the div with the actual bar was hidden even initializing it before didnt work. At the moment i am just unhide it. any better solution?

Why doesn't qTip tooltip stay open so I can click link on it?

Here is my example in jsfiddle, hover over Minnesota to see the qtip popup. I am using qTip jquery plugin and I am getting stuck on making the qtip stay around long enough for someone to click the link on the tooltip. I have tried all kinds on scenerios to make it stay open. Reading the documentation it seems to be easy to do so but I tried these and no luck. I tried these
hide: { when: 'mouseout', fixed: true }
and
hide: { fixed: true, delay: 1000 }
and many others and nothing will keep the tooltip up so the user can click on a link. The thing that is irritating is that on the reference page. If you click on any of the example links they are doing exactly what i want to do and i went to the source and if seems that they are using
hide: 'unfocus',
and
hide: {
fixed: true,
delay: 240
},
but I tried both and the tooltip won't stay open. Am I missing something?

Since it appears the position of your tip is off to the right some, try this:
$(this).qtip(
{
hide:{ //moved hide to here,
delay:500, //give a small delay to allow the user to mouse over it.
fixed:true
},
content: $("." + test).html(),
style: {
name: 'dark',
style: {
border: 1,
cursor: 'pointer',
padding: '5px 8px',
name: 'blue'
},
border: {},
tip: true // Apply a tip at the default tooltip corner
}
});
Updated fiddle.

You've got 2 styles in your code and it's just all sorts of wonky. Here is your code, working.
http://jsfiddle.net/JDVTM/