We Keep Coding

How do I reload script using barba transition

javascript is almost new for me and I wanted to use a transition with barba.js.
Unfortunately, I encountered a problem that seems common, once my transition is done, I have to reload the page for the additional scripts to work.
I've been looking for a long time and tried a lot of solutions, but with my level of javascript, I'm not even sure I've typed the code correctly.
I leave my Github project here, if someone is willing to explain to a noob how to write code correctly, I will be eternally grateful.
https://github.com/Jeremmie/punchyparasite_2
const wipe = document.querySelector('.wipe-transition');
const allBandes = document.querySelectorAll('.bande');
const TLAnim = new TimelineMax();
function delay(n) {
return new Promise((done) => {
setTimeout(() => {
done();
}, n)
})
}
barba.init({
sync: true,
transitions: [
{
async leave() {
const done = this.async();
TLAnim
.to(allBandes, { height: '100%', stagger: 0.05 })
// TLAnim.to(wipe, {left: '0%', ease: "power2.out", duration: 0.5});
await delay(1500);
done();
},
enter() {
// TLAnim
// .to(wipe, {left: '100%', ease:"power2.in", duration: 0.5})
// .set(wipe, {left: '-100%'})
TLAnim
.to(allBandes, { height: '0%', stagger: 0.05 })
}
}
]
})

I am having trouble understanding the Leader-Line js documentation

I am trying to create code that will draw a line from point a to point b using the leaderline library. https://github.com/anseki/leader-line
It looks like the section I need to reference is under Methods
self = line.show([showEffectName[, animOptions]])
where showEffectName: 'draw' and animOptions: {duration: 500, timing: [0.58, 0, 0.42, 1]}
Here is an example shown using a button to show/hide the line
var line = new LeaderLine(startElement, endElement, {hide: true});
showButton.addEventListener('click', function() { line.show(); }, false);
hideButton.addEventListener('click', function() { line.hide(); }, false);
How do I implement the self= code into the button? I'm not even sure what self= is supposed to mean. The below code does not work
var line = new LeaderLine(startElement, endElement, {hide: true});
line.show() = line.show({showEffectName:'draw'}, {animOptions: {duration: 3000, timing: 'linear'}});
startElement.addEventListener('click', function() { line.show(); });

Here is what you are looking for
line.show('draw', {
animOptions: {
duration: 3000,
timing: [0.5, 0, 1, 0.42]
}
})
And now you can call this in any function
button.addEventListener('click', function() {
line.show('draw', {
animOptions: {
duration: 3000,
timing: [0.5, 0, 1, 0.42]
}
})
});

Your code does not work because you have to put only value like below.
var line = new LeaderLine(startElement, endElement, {hide: true});
startElement.addEventListener("click", function () {
line.show("draw", {duration: 3000, timing: 'linear'});
});

jQuery 3.5.1 callback function in .animate() not working

I have a problem making a callback function in .animate().
The animation goes very smoothly and without problems, but the complete: ()=> part is not working at all. I've copied this structure from the documentation but it just doesn't want to coop after my changes. Does anyone know why it doesn't work? Is it cause by setInterval? If so, how can I loop this animation?
The code is as follows:
setInterval(() => {
$(".slide")[0].animate({
"marginLeft": "-100%"
}, {
duration: 2000,
easing: "linear",
complete: () => {
console.log("test");
},
});
}, 6000);

You will need to make use of the correct selector:
setInterval(() => {
$(".slide").eq(0).animate({
"marginLeft": "-100%"
}, {
duration: 2000,
easing: "linear",
complete: () => {
console.log("test");
},
});
}, 6000);
When you get element 0 fro mthe Object, it returns the DOM Element and not a jQuery Object. See More:
https://api.jquery.com/eq/

Function not firing correctly

currently I have the JS below. I'm trying to run the slideout.close(); event with smoothstate onStart. My code is below and i'm currently getting an error in the console. Could someone please help me out.
Thanks.
$(document).ready(function() {
slideout();
});
function slideout() {
var slideout = new Slideout({
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
}
$(function(){
'use strict';
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
slideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});

You've created a global function called slideout, within which you have a local variable called slideout that is the one that refers to a Slideout object - you can't access that local variable from other functions. When you try to use slideout.close() that is looking for a .close() method on the function.
One fix would be to change the name of the variable or function and make the variable global too, so that you can access it anywhere. But adding more globals is messy.
I think it should be fine to combine all of your code into a single document ready handler, so that everything is in the same scope without needing any globals (you would still need to use a different name for the variable).
I can't test the following because I don't have whatever Slideout is, but:
$(document).ready(function() {
'use strict';
var slideout; // variable that is local to the doc ready handler function
// and accessible to all code within that handler
function initSlideout() { // function renamed
slideout = new Slideout({ // assign to variable declared above
'panel': document.getElementById('slideout-content'),
'menu': document.getElementById('slideout-nav'),
'padding': 256,
'tolerance': 70,
'side': 'right'
});
}
initSlideout();
$('.mobile-nav__icon').on('click', function() {
slideout.toggle();
});
var options = {
prefetch: true,
cacheLength: 2,
onStart: {
duration: 860,
render: function ($container) {
$container.addClass('is-exiting');
smoothState.restartCSSAnimations();
slideout.close();
}
},
onReady: {
duration: 0,
render: function ($container, $newContent) {
$container.removeClass('is-exiting');
$container.html($newContent);
}
},
onAfter: function() {
initSlideout();
}
},
smoothState = $('#animate-wrapper').smoothState(options).data('smoothState');
});

How can I add an 'ended' function to .animate()

In the following jQuery statement, I'm attempting to enable the pointer events when the button animation completes, but it is unclear to me how to implement an ended or complete function. Any recommendations?
$('#certButton').delay(5500).animate({ 'opacity': [ 1, "linear" ]}, 500);

As described in the documentation, this can be added as the 4th parameter of the animate() function, like that:
$('#certButton').delay(5500).animate(
{ 'opacity': 1 },
500,
"linear",
function() {
}
);
Update:
JSFiddle here.
I am also unsure why this line
{ 'opacity': [ 1, "linear" ]}
works, but I think the syntax conforming with the documentation I used above looks cleaner, and functions the same (see the JSFiddle).

Thanks for the help.
I have reworked it off your answers to the below code.
$('#certButton').delay(500).animate({ 'opacity': [ 1, "linear" ]}, {
duration:500,
complete: function() {
document.getElementById("certButton").style.pointerEvents = "visible";
}
});