I recently started using turbolinks on my project and created a preloader, i’m facing an issue where sometimes javascript doesn’t get fired in my preloader.js
file.
Example:
$(function() {
window.addEventListener("load", function load(event){
doneLoad()
})
gsap.set('html, body', {
overflowY: 'hidden'
})
$(document).on('turbolinks:click', function(){
startLoad()
});
$(document).on('turbolinks:load', () => {
setTimeout(() => {
doneLoad()
}, 500)
});
function startLoad() {
setTimeout(() => {
window.scrollTo(0, 0);
}, 500);
gsap.timeline()
.set('html, body', {
overflowY: 'hidden'
})
.set('.turbo__loader', {
visibility: 'visible'
})
.to('.turbo__lines', {
stagger: .3,
height: "100%",
duration: .5
})
.to('.turbo__logo, .__loader', {
opacity: 1,
duration: .3
}, '-=.3')
}
function doneLoad() {
console.log('Done Loading'); //<----Always fires
gsap.timeline() //<----Doesn't always work
.set('html, body', {
overflowY: 'unset'
})
.set('#app, #__footer', {
visibility: 'visible',
}, 'add')
.add('do')
.to('.turbo__lines', {
stagger: .3,
height: '0%'
})
.to('.turbo__logo, .__loader', {
duration: .3,
opacity: 0
}, 'do')
.to('.turbo__loader', {
visibility: 'hidden'
})
}
});
console.log
in the doneLoad()
function is always firing but gsap.timeline
not always, I’m not seeing any errors, what could be the issue here? It only happens at the first load after that i never faced an issue.