//Barba Page Transitions
barba.init({
views: [
{
namespace: 'home',
afterEnter() {
links.forEach((link) => {
link.style.color = '#fefefe';
});
copywright.style.color = '#fefefe';
linkHarpreetLI.style.flex = '0';
linkWorkLI.style.flex = '1';
linkCollab.textContent = 'Collab';
linkProjects.textContent = 'projects';
linkHarpreet.href = '../aboutme/aboutme.html';
animateSlides();
cursorAnimate();
},
beforeLeave() {
ScrollTrigger.refresh(true);
},
},
{
namespace: 'projects',
afterEnter() {
//CHANGE COLOR
links.forEach((link) => {
link.style.color = '#000';
});
copywright.style.color = '#000';
//CHANGE HREF
linkHarpreet.href = '../aboutme/aboutme.html';
linkWork.href = '../index.html';
linkCollab.href = '../collab/collab.html';
linkStar.style.fill = '#000';
//CHANGE STYLE
// linkHarpreetLI.style.flex = '1';
// linkWorkLI.style.flex = '1';
linkCollab.textContent = 'Collab';
linkProjects.textContent = '';
featuredProjects();
cursorAnimate();
},
},
{
namespace: 'collab',
afterEnter() {
links.forEach((link) => {
link.style.color = '#000';
});
copywright.style.color = '#000';
linkHarpreet.href = '../aboutme/aboutme.html';
linkWork.href = '../index.html';
linkProjects.href = '../projects/project.html';
linkStar.style.fill = '#000';
linkCollab.textContent = '';
linkHarpreetLI.style.flex = '2';
linkWorkLI.style.flex = '0';
linkProjects.textContent = 'projects';
animateCollab();
cursorAnimate();
},
beforeLeave() {},
},
{
namespace: 'about',
afterEnter() {
links.forEach((link) => {
link.style.color = '#fff';
});
linkHarpreet.href = '../index.html';
linkCollab.textContent = 'Collab';
linkCollab.href = '../collab/collab.html';
linkProjects.href = '../projects/project.html';
linkProjects.textContent = 'projects';
linkStar.style.fill = '#cbd5e1';
linkWork.href = '../index.html';
animateAboutMe();
cursorAnimate();
},
},
],
transitions: [
{
leave({ current, next }) {
let done = this.async();
//An Animation
const tl = gsap.timeline({ defaults: { ease: 'power2.inOut' } });
tl.fromTo(
'.wrapper',
1,
{ y: '0%' },
{ y: '-100%', ease: 'power2.inOut' }
);
tl.fromTo(current.container, 1, { opacity: 1 }, { opacity: 0 });
tl.fromTo(
'.slider',
0.75,
{ x: '-100%' },
{ x: '0%', onComplete: done },
'-=0.5'
);
},
enter({ current, next }) {
let done = this.async();
//Scroll to the top
window.scrollTo(0, 0);
//An Animation
const tl = gsap.timeline({ defaults: { ease: 'power2.inOut' } });
tl.fromTo(
'.slider',
1,
{ x: '0%' },
{ x: '100%', stagger: 0.2, onComplete: done }
);
tl.fromTo(next.container, 1, { opacity: 0 }, { opacity: 1 });
tl.fromTo(
'.wrapper',
1,
{ y: '-100%' },
{ y: '0%', ease: 'power2.inOut' }
);
},
},
],
});