757 lines
32 KiB
JavaScript
757 lines
32 KiB
JavaScript
// Generate vertical lines for .home__circles-lines
|
||
if ($('.home__circles-lines').length > 0) {
|
||
const count = 82;
|
||
const fragment = document.createDocumentFragment();
|
||
const div = document.createElement('div');
|
||
|
||
for (let i = 0; i < count; i++) {
|
||
fragment.appendChild(div.cloneNode(true));
|
||
}
|
||
|
||
$('.home__circles-lines').append(fragment);
|
||
console.log('✅ 82 divs added to .home__circles-lines');
|
||
} else {
|
||
console.warn('⚠️ .home__circles-lines not found in DOM');
|
||
}
|
||
|
||
/* 2.4 Home scroll animation */
|
||
$(window).on('load',function (){
|
||
$('#preloader').fadeOut(1500);
|
||
if ($('.home-page').length > 0) {
|
||
if ($(window).width() > 768 && window.orientation !== 0) {
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
gsap.registerPlugin(ScrollToPlugin);
|
||
|
||
gsap.delayedCall(0.5, function () {
|
||
gsap.to('.main--home', {duration: 0.5,autoAlpha: 1},0);
|
||
});
|
||
|
||
// Animación de líneas verticales
|
||
gsap.delayedCall(0.8, function () {
|
||
gsap.to(".home__circles-lines div", {
|
||
height: '100%',
|
||
opacity: 1,
|
||
duration: 2,
|
||
ease: "power2.out",
|
||
stagger: {
|
||
amount: 1,
|
||
from: "center"
|
||
}
|
||
});
|
||
});
|
||
|
||
|
||
|
||
let titles = gsap.utils.toArray(".page-title li"),
|
||
sections = gsap.utils.toArray(".scrollable"),
|
||
projectBlocks = gsap.utils.toArray(".projects__blocks .projects__block"),
|
||
newsBlocks = gsap.utils.toArray(".news__blocks .news__block");
|
||
|
||
// bail out if we’re missing the basics:
|
||
if (!titles.length || !sections.length) {
|
||
// scroll.js — right before your `if (!titles.length || !sections.length) {…}`
|
||
console.warn("⚠️ Missing key elements, skipping scroll animations.");
|
||
return;
|
||
}
|
||
|
||
let projectHeights = [];
|
||
let projectHeightsScroll = [];
|
||
let projectHeightsTotal = 0;
|
||
let tempHeight = 0;
|
||
projectBlocks.forEach((block, index) => {
|
||
let height = $(block).outerHeight(),
|
||
padding = parseInt($(block).css('padding-top'));
|
||
if (index > 0) {
|
||
projectHeights[index] = tempHeight - $('.projects__blocks').innerHeight() / 2;
|
||
projectHeightsScroll[index] = tempHeight + padding;
|
||
} else {
|
||
projectHeights[index] = 0;
|
||
projectHeightsScroll[index] = 0;
|
||
}
|
||
tempHeight += height;
|
||
});
|
||
projectHeightsTotal = tempHeight;
|
||
|
||
let newsHeights = [];
|
||
let newsHeightsScroll = [];
|
||
let newsHeightsTotal = 0;
|
||
tempHeight = 0;
|
||
newsBlocks.forEach((block, index) => {
|
||
let height = $(block).outerHeight(),
|
||
padding = parseInt($(block).css('padding-top'));
|
||
if (index > 0) {
|
||
newsHeights[index] = tempHeight - $('.news__blocks').innerHeight() / 2;
|
||
newsHeightsScroll[index] = tempHeight + padding;
|
||
} else {
|
||
newsHeights[index] = 0;
|
||
newsHeightsScroll[index] = 0;
|
||
}
|
||
tempHeight += height;
|
||
});
|
||
newsHeightsTotal = tempHeight;
|
||
|
||
let currentSlide = 0;
|
||
let skipMode = false;
|
||
|
||
let scrollDurationHome = 1000*(parseInt(hSpeed)/100),
|
||
addBlocksScroll = 200,
|
||
projectBlocksScroll = (projectHeightsTotal - $('.projects__blocks').innerHeight()) < 0 ? 0 : (projectHeightsTotal - $('.projects__blocks').innerHeight()) * (parseInt(vSpeed)/100),
|
||
newsBlocksScroll = (newsHeightsTotal - $('.news__blocks').innerHeight()) < 0 ? 0 : (newsHeightsTotal - $('.news__blocks').innerHeight()) * (parseInt(vSpeed)/100);
|
||
|
||
let linkData = {
|
||
'0': 0,
|
||
'1': scrollDurationHome,
|
||
'2': scrollDurationHome * 2 + projectBlocksScroll + addBlocksScroll*2,
|
||
'3': scrollDurationHome * 3 + projectBlocksScroll + addBlocksScroll*2,
|
||
'4': scrollDurationHome * 4 + projectBlocksScroll + addBlocksScroll*2,
|
||
'5': scrollDurationHome * 5 + projectBlocksScroll + addBlocksScroll*2,
|
||
'6': scrollDurationHome * 6 + projectBlocksScroll + newsBlocksScroll + addBlocksScroll*4,
|
||
}
|
||
|
||
let tl = gsap.timeline();
|
||
|
||
let st = ScrollTrigger.create({
|
||
trigger: ".scroll",
|
||
pin: true,
|
||
scrub: true,
|
||
start: "top top",
|
||
end: "+=" + (scrollDurationHome * (sections.length - 1) + projectBlocksScroll + newsBlocksScroll + addBlocksScroll*4),
|
||
onUpdate: ({progress, direction, isActive}) => {
|
||
let currentScroll = $('html').scrollTop();
|
||
Object.keys(linkData).forEach(key => {
|
||
if (currentScroll >= linkData[key]) currentSlide = key;
|
||
});
|
||
},
|
||
animation: tl
|
||
});
|
||
|
||
|
||
let sectionNumber = 0;
|
||
|
||
//home+projects start
|
||
sectionNumber++;
|
||
|
||
gsap.set('.home .sticky-title li', {'opacity': 0});
|
||
|
||
let tlProjectBtn = new TimelineMax({paused: true});
|
||
tlProjectBtn.from(".projects .content__btn-block > *", 0.3, {scale: 0, ease: Back.easeOut});
|
||
|
||
let tlTitle2 = gsap.timeline({paused: true});
|
||
tlTitle2.fromTo(titles[sectionNumber], {y: "100%"},{y: "0", duration: 0.2,});
|
||
tlTitle2.fromTo(titles[sectionNumber - 1], {y: "0"}, {y: "-100%", duration: 0.2,}, 0);
|
||
|
||
let blockNavigation = false;
|
||
|
||
let tl1 = gsap.timeline();
|
||
let st1 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub: parseInt(scrubPower)/100,
|
||
start: "0 -" + 0,
|
||
snap: parseInt(snapMode),
|
||
end: "+=" + scrollDurationHome,
|
||
onUpdate: ({progress, direction, isActive}) => {
|
||
if (progress >= 0.9) {
|
||
tlProjectBtn.play();
|
||
} else {
|
||
tlProjectBtn.reverse();
|
||
}
|
||
blockNavigation = true;
|
||
$('.header__menu').addClass('blocked');
|
||
},
|
||
onScrubComplete: ({progress, direction, isActive}) => {
|
||
blockNavigation = false;
|
||
$('.header__menu').removeClass('blocked');
|
||
},
|
||
onToggle: ({progress, direction, isActive}) => {
|
||
if (!isActive && direction > 0) {
|
||
if (!skipMode) tlTitle2.play();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(1).addClass('active');
|
||
} else if (isActive && direction < 0) {
|
||
if (!skipMode) tlTitle2.reverse();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(0).addClass('active');
|
||
}
|
||
},
|
||
animation: tl1
|
||
});
|
||
|
||
|
||
tl1.fromTo(sections,{xPercent: 0}, {xPercent: -100, ease: "none"}, 0);
|
||
|
||
gsap.delayedCall(0.4, function () {
|
||
let tl1 = new TimelineMax();
|
||
let titles = gsap.utils.toArray(".home .content__title > *");
|
||
titles.forEach((title, index) => {
|
||
if (index % 2 === 0) {
|
||
tl1.from(title, 1, {autoAlpha: 0, left: -600, ease: Power1.easeOut}, 0.2 * index);
|
||
} else {
|
||
tl1.from(title, 1, {autoAlpha: 0, right: -600, ease: Power1.easeOut}, 0.2 * index);
|
||
}
|
||
});
|
||
tl1.from(".home .content__description", 1, {
|
||
autoAlpha: 0,
|
||
left: -600,
|
||
ease: Power1.easeOut
|
||
}, '-=0.5');
|
||
tl1.from(".home .content__btn-block > *", 1, {scale: 0, ease: Back.easeOut}, '-=0.5');
|
||
|
||
let elements = $(".home__number");
|
||
TweenMax.staggerFrom(elements, 1, {autoAlpha: 0, bottom: -300, ease: Back.easeOut}, 0.3);
|
||
});
|
||
gsap.delayedCall(0.5, function () {
|
||
let numbers = gsap.utils.toArray(".home__number-digital[data-number]");
|
||
|
||
numbers.forEach((number, index) => {
|
||
let Cont = {val: 0},
|
||
NewVal = $(number).data('number');
|
||
|
||
gsap.to(Cont, 2, {
|
||
val: NewVal, roundProps: "val", onUpdate: function () {
|
||
number.innerHTML = Cont.val
|
||
}
|
||
});
|
||
});
|
||
});
|
||
gsap.delayedCall(0.8, function () {
|
||
const circlesLine = document.querySelector(".home__circles-lines div");
|
||
if (circlesLine) {
|
||
gsap.to(circlesLine, {height: '100%', duration: 2, opacity: 1});
|
||
} else {
|
||
console.warn("⚠️ Missing .home__circles-lines div — animation skipped.");
|
||
}
|
||
});
|
||
|
||
gsap.delayedCall(1, function () {
|
||
gsap.to(".home__circle--left", {left: '50%', duration: 2, opacity: 1});
|
||
gsap.to(".home__circle--right", {right: '50%', duration: 2, opacity: 1});
|
||
});
|
||
|
||
tl1.to(".home__circle--left, .home__circle--right", {
|
||
x: 0,
|
||
ease: "none"
|
||
}, 0);
|
||
|
||
//projects
|
||
let titlesProjects = gsap.utils.toArray(".projects .content__title > *");
|
||
titlesProjects.forEach((title, index) => {
|
||
if (index % 2 === 0) {
|
||
tl1.from(title, {autoAlpha: 0, right: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
} else {
|
||
tl1.from(title, {autoAlpha: 0, left: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
}
|
||
});
|
||
|
||
let menuProjects = gsap.utils.toArray(".projects .projects__menu > li > *");
|
||
menuProjects.forEach((title, index) => {
|
||
tl1.from(title, {autoAlpha: 0, right: -700 - 150 * index, ease: Power1.easeOut}, 0);
|
||
});
|
||
|
||
|
||
let tl11 = gsap.timeline();
|
||
let st11 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome + addBlocksScroll),
|
||
end: "+=" + projectBlocksScroll,
|
||
animation: tl11,
|
||
});
|
||
let projectsBlockHeight = 0;
|
||
$('.projects__block').each(function () {
|
||
projectsBlockHeight += $(this).outerHeight();
|
||
});
|
||
projectsBlockHeight -= $('.projects__blocks').innerHeight();
|
||
tl11.to(".projects__blocks", {
|
||
scrollTo: {y: projectsBlockHeight},
|
||
onUpdate: function () {
|
||
let scrolled = $('.projects__blocks').scrollTop();
|
||
let maxIndex = 0;
|
||
projectHeights.forEach(function (value, index) {
|
||
if (scrolled > value) maxIndex = index;
|
||
});
|
||
$('.projects__menu li').removeClass('active');
|
||
$('.projects__menu li').eq(maxIndex).addClass('active');
|
||
},
|
||
ease: "none"
|
||
}, 0);
|
||
//home+projects end
|
||
|
||
|
||
//awards start
|
||
sectionNumber++;
|
||
|
||
let tlAvardsBtn = new TimelineMax({paused: true});
|
||
tlAvardsBtn.from(".awards .content__description", 0.3, {
|
||
autoAlpha: 0,
|
||
left: -600,
|
||
ease: Power1.easeOut
|
||
});
|
||
tlAvardsBtn.from(".awards .content__btn-block > *", 0.3, {scale: 0, ease: Back.easeOut});
|
||
|
||
let tlTitle3 = gsap.timeline({paused: true});
|
||
tlTitle3.fromTo(titles[sectionNumber], {y: "100%"},{y: "0", duration: 0.2,});
|
||
tlTitle3.fromTo(titles[sectionNumber - 1], {y: "0"}, {y: "-100%", duration: 0.2,}, 0);
|
||
|
||
let tl3 = gsap.timeline();
|
||
let st3 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome + projectBlocksScroll + addBlocksScroll*2),
|
||
end: "+=" + (scrollDurationHome),
|
||
onUpdate: ({progress, direction, isActive}) => {
|
||
if (progress >= 0.9) {
|
||
tlAvardsBtn.play();
|
||
} else {
|
||
tlAvardsBtn.reverse();
|
||
}
|
||
},
|
||
onToggle: ({progress, direction, isActive}) => {
|
||
if (!isActive && direction > 0) {
|
||
if (!skipMode) tlTitle3.play();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(2).addClass('active');
|
||
} else if (isActive && direction < 0) {
|
||
if (!skipMode) tlTitle3.reverse();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(1).addClass('active');
|
||
}
|
||
},
|
||
animation: tl3
|
||
});
|
||
|
||
let titlesAwards = gsap.utils.toArray(".awards .content__title > *");
|
||
titlesAwards.forEach((title, index) => {
|
||
if (index % 2 === 0) {
|
||
tl3.from(title, {autoAlpha: 0, right: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
} else {
|
||
tl3.from(title, {autoAlpha: 0, left: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
}
|
||
});
|
||
|
||
let tl31 = gsap.timeline();
|
||
let st31 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome + projectBlocksScroll + scrollDurationHome / 2 + addBlocksScroll*2),
|
||
end: "+=" + (scrollDurationHome / 2),
|
||
animation: tl31
|
||
});
|
||
tl31.from('.awards .content__subtitle', {autoAlpha: 0, top: -200, ease: Power1.easeOut}, 0);
|
||
let awardsAwards = gsap.utils.toArray(".awards__list .content__award");
|
||
awardsAwards.forEach((award, index) => {
|
||
tl31.from(award, {autoAlpha: 0, bottom: -800 - 300 * index, ease: Power1.easeOut}, 0);
|
||
});
|
||
//awards end
|
||
|
||
//testimonials start
|
||
sectionNumber++;
|
||
let tlTitle4 = gsap.timeline({paused: true});
|
||
tlTitle4.fromTo(titles[sectionNumber], {y: "100%"},{y: "0", duration: 0.2,});
|
||
tlTitle4.fromTo(titles[sectionNumber - 1], {y: "0"}, {y: "-100%", duration: 0.2,}, 0);
|
||
|
||
let tl4 = gsap.timeline();
|
||
let st4 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome * (sectionNumber - 1) + projectBlocksScroll + addBlocksScroll*2),
|
||
end: "+=" + (scrollDurationHome),
|
||
onToggle: ({progress, direction, isActive}) => {
|
||
if (!isActive && direction > 0) {
|
||
if (!skipMode) tlTitle4.play();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(3).addClass('active');
|
||
} else if (isActive && direction < 0) {
|
||
if (!skipMode) tlTitle4.reverse();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(2).addClass('active');
|
||
}
|
||
},
|
||
animation: tl4
|
||
});
|
||
|
||
let titlesTesti = gsap.utils.toArray(".testimonials .content__title > *");
|
||
titlesTesti.forEach((title, index) => {
|
||
if (index % 2 === 0) {
|
||
tl4.from(title, {autoAlpha: 0, right: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
} else {
|
||
tl4.from(title, {autoAlpha: 0, left: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
}
|
||
});
|
||
let clientsTesti = gsap.utils.toArray(".testimonials__clients > .testimonials__client");
|
||
clientsTesti.forEach((client, index) => {
|
||
tl4.from(client, {autoAlpha: 0, bottom: -600 - 200 * index, ease: Power1.easeOut}, 0);
|
||
});
|
||
|
||
|
||
let tl41 = gsap.timeline();
|
||
let st41 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome * (sectionNumber - 1) + projectBlocksScroll + scrollDurationHome / 2 + addBlocksScroll*2),
|
||
end: "+=" + (scrollDurationHome / 2),
|
||
animation: tl41
|
||
});
|
||
tl41.from('.testimonials .content__subtitle', {autoAlpha: 0, top: -200, ease: Power1.easeOut}, 0);
|
||
//testimonials end
|
||
|
||
|
||
//experience start
|
||
sectionNumber++;
|
||
|
||
let tlExpBtn = new TimelineMax({paused: true});
|
||
tlExpBtn.from(".experience .content__description", 0.3, {
|
||
autoAlpha: 0,
|
||
left: -600,
|
||
ease: Power1.easeOut
|
||
});
|
||
tlExpBtn.from(".experience .content__btn-block > *", 0.3, {scale: 0, ease: Back.easeOut});
|
||
|
||
let tlTitle5 = gsap.timeline({paused: true});
|
||
tlTitle5.fromTo(titles[sectionNumber], {y: "100%"},{y: "0", duration: 0.2,});
|
||
tlTitle5.fromTo(titles[sectionNumber - 1], {y: "0"}, {y: "-100%", duration: 0.2,}, 0);
|
||
|
||
|
||
let tl5 = gsap.timeline();
|
||
let st5 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome * (sectionNumber - 1) + projectBlocksScroll + addBlocksScroll*2),
|
||
end: "+=" + (scrollDurationHome),
|
||
onUpdate: ({progress, direction, isActive}) => {
|
||
if (progress >= 0.9) {
|
||
tlExpBtn.play();
|
||
} else {
|
||
tlExpBtn.reverse();
|
||
}
|
||
},
|
||
onToggle: ({progress, direction, isActive}) => {
|
||
if (!isActive && direction > 0) {
|
||
if (!skipMode) tlTitle5.play();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(4).addClass('active');
|
||
} else if (isActive && direction < 0) {
|
||
if (!skipMode) tlTitle5.reverse();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(3).addClass('active');
|
||
}
|
||
},
|
||
animation: tl5
|
||
});
|
||
|
||
|
||
let titlesExp = gsap.utils.toArray(".experience .content__title > *");
|
||
titlesExp.forEach((title, index) => {
|
||
if (index % 2 === 0) {
|
||
tl5.from(title, {autoAlpha: 0, right: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
} else {
|
||
tl5.from(title, {autoAlpha: 0, left: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
}
|
||
});
|
||
|
||
let tl51 = gsap.timeline();
|
||
let st51 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome * (sectionNumber - 1) + projectBlocksScroll + scrollDurationHome / 2 + addBlocksScroll*2),
|
||
end: "+=" + (scrollDurationHome / 2),
|
||
animation: tl51
|
||
});
|
||
let awardsExp = gsap.utils.toArray(".experience__list .content__award");
|
||
awardsExp.forEach((award, index) => {
|
||
tl51.from(award, {autoAlpha: 0, bottom: -800 - 300 * index, ease: Power1.easeOut}, 0);
|
||
});
|
||
//experience end
|
||
|
||
//news start
|
||
sectionNumber++;
|
||
|
||
let tlNewsBtn = new TimelineMax({paused: true});
|
||
tlNewsBtn.from(".news .content__btn-block > *", 0.3, {scale: 0, ease: Back.easeOut});
|
||
|
||
let tlTitle6 = gsap.timeline({paused: true});
|
||
tlTitle6.fromTo(titles[sectionNumber], {y: "100%"},{y: "0", duration: 0.2,});
|
||
tlTitle6.fromTo(titles[sectionNumber - 1], {y: "0"}, {y: "-100%", duration: 0.2,}, 0);
|
||
|
||
let tl6 = gsap.timeline();
|
||
let st6 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome * (sectionNumber - 1) + projectBlocksScroll + addBlocksScroll*2),
|
||
end: "+=" + (scrollDurationHome),
|
||
onUpdate: ({progress, direction, isActive}) => {
|
||
if (progress >= 0.9) {
|
||
tlNewsBtn.play();
|
||
} else {
|
||
tlNewsBtn.reverse();
|
||
}
|
||
},
|
||
onToggle: ({progress, direction, isActive}) => {
|
||
if (!isActive && direction > 0) {
|
||
if (!skipMode) tlTitle6.play();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(5).addClass('active');
|
||
} else if (isActive && direction < 0) {
|
||
if (!skipMode) tlTitle6.reverse();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(4).addClass('active');
|
||
}
|
||
},
|
||
animation: tl6
|
||
});
|
||
|
||
let titlesNews = gsap.utils.toArray(".news .content__title > *");
|
||
titlesNews.forEach((title, index) => {
|
||
if (index % 2 === 0) {
|
||
tl6.from(title, {autoAlpha: 0, right: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
} else {
|
||
tl6.from(title, {autoAlpha: 0, left: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
}
|
||
});
|
||
|
||
let menuNews = gsap.utils.toArray(".news .news__menu > li > *");
|
||
menuNews.forEach((title, index) => {
|
||
tl6.from(title, {autoAlpha: 0, right: -700 - 150 * index, ease: Power1.easeOut}, 0);
|
||
});
|
||
|
||
|
||
let tl61 = gsap.timeline();
|
||
let st61 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome * sectionNumber + projectBlocksScroll + addBlocksScroll*3),
|
||
end: "+=" + newsBlocksScroll,
|
||
animation: tl61
|
||
});
|
||
let newsBlockHeight = 0;
|
||
$('.news__block').each(function () {
|
||
newsBlockHeight += $(this).outerHeight();
|
||
});
|
||
newsBlockHeight -= $('.news__blocks').innerHeight();
|
||
tl61.to(".news__blocks", {
|
||
scrollTo: {y: newsBlockHeight},
|
||
onUpdate: function () {
|
||
let scrolled = $('.news__blocks').scrollTop();
|
||
let maxIndex = 0;
|
||
newsHeights.forEach(function (value, index) {
|
||
if (scrolled > value) maxIndex = index;
|
||
});
|
||
$('.news__menu li').removeClass('active');
|
||
$('.news__menu li').eq(maxIndex).addClass('active');
|
||
},
|
||
ease: "none"
|
||
}, 0);
|
||
//news end
|
||
|
||
|
||
//contacts start
|
||
sectionNumber++;
|
||
|
||
let tlTitle7 = gsap.timeline({paused: true});
|
||
tlTitle7.fromTo(titles[sectionNumber], {y: "100%"},{y: "0", duration: 0.2,});
|
||
tlTitle7.fromTo(titles[sectionNumber - 1], {y: "0"}, {y: "-100%", duration: 0.2,}, 0);
|
||
|
||
|
||
let tl7 = gsap.timeline();
|
||
let st7 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome * (sectionNumber - 1) + projectBlocksScroll + newsBlocksScroll + addBlocksScroll*4),
|
||
end: "+=" + (scrollDurationHome),
|
||
onToggle: ({progress, direction, isActive}) => {
|
||
if (!isActive && direction > 0) {
|
||
if (!skipMode) tlTitle7.play();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(6).addClass('active');
|
||
} else if (isActive && direction < 0) {
|
||
if (!skipMode) tlTitle7.reverse();
|
||
$('.header__menu li').removeClass('active');
|
||
$('.header__menu li').eq(5).addClass('active');
|
||
}
|
||
},
|
||
animation: tl7
|
||
});
|
||
|
||
|
||
let titlesContacts = gsap.utils.toArray(".contacts .content__title > *");
|
||
titlesContacts.forEach((title, index) => {
|
||
if (index % 2 === 0) {
|
||
tl7.from(title, {autoAlpha: 0, right: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
} else {
|
||
tl7.from(title, {autoAlpha: 0, left: -600 - 100 * index, ease: Power1.easeOut}, 0);
|
||
}
|
||
});
|
||
tl7.from('.contacts .contacts__copyright', {autoAlpha: 0, bottom: -300, ease: Power1.easeOut}, 0);
|
||
|
||
let menuContacts = gsap.utils.toArray(".contacts .contacts__menu > li > *");
|
||
menuContacts.forEach((title, index) => {
|
||
tl7.from(title, {autoAlpha: 0, right: -700 - 150 * index, ease: Power1.easeOut}, 0);
|
||
});
|
||
|
||
let tl71 = gsap.timeline();
|
||
let st71 = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome * (sectionNumber - 1) + projectBlocksScroll + newsBlocksScroll + scrollDurationHome / 2 + addBlocksScroll*4),
|
||
end: "+=" + (scrollDurationHome / 2),
|
||
animation: tl71
|
||
});
|
||
tl71.from('.contacts .content__subtitle', {autoAlpha: 0, top: -200, ease: Power1.easeOut}, 0);
|
||
tl71.from('.contacts .content__brief', {autoAlpha: 0, left: -400, ease: Power1.easeOut}, 0);
|
||
tl71.from('.contacts .content__form', {autoAlpha: 0, right: -400, ease: Power1.easeOut}, 0);
|
||
//contacts end
|
||
|
||
|
||
let tlScroll = gsap.timeline();
|
||
let stScroll = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome + projectBlocksScroll + addBlocksScroll*2),
|
||
end: "+=" + (scrollDurationHome * (sections.length - 3)),
|
||
snap: 0.25*parseInt(snapMode),
|
||
onUpdate: function () {
|
||
blockNavigation = true;
|
||
$('.header__menu').addClass('blocked');
|
||
},
|
||
onScrubComplete: ({progress, direction, isActive}) => {
|
||
blockNavigation = false;
|
||
$('.header__menu').removeClass('blocked');
|
||
},
|
||
animation: tlScroll
|
||
});
|
||
tlScroll.fromTo(sections, {xPercent: -100}, {xPercent: -100 * (sections.length - 2),ease: "none"}, 0);
|
||
|
||
let tlScrollLast = gsap.timeline();
|
||
let stScrollLast = ScrollTrigger.create({
|
||
trigger: "body",
|
||
scrub:parseInt(scrubPower)/100,
|
||
start: "0 -" + (scrollDurationHome * (sections.length - 2) + projectBlocksScroll + newsBlocksScroll + addBlocksScroll*4),
|
||
end: "+=" + (scrollDurationHome),
|
||
snap: parseInt(snapMode),
|
||
onUpdate: function () {
|
||
blockNavigation = true;
|
||
$('.header__menu').addClass('blocked');
|
||
},
|
||
onScrubComplete: ({progress, direction, isActive}) => {
|
||
blockNavigation = false;
|
||
$('.header__menu').removeClass('blocked');
|
||
},
|
||
animation: tlScrollLast
|
||
});
|
||
tlScrollLast.fromTo(sections, {xPercent: -100*(sections.length - 2)}, {xPercent: -100 * (sections.length - 1),ease: "none"}, 0);
|
||
|
||
gsap.set(titles, {y: "100%"});
|
||
|
||
gsap.delayedCall(0.2, function () {
|
||
gsap.to(titles[0], {y: "0", duration: 0.2});
|
||
});
|
||
|
||
gsap.set(sections, {xPercent: 0});
|
||
|
||
// scroll.js
|
||
// scroll.js
|
||
|
||
$(document).on('click', '.js-scroll-link', function(event) {
|
||
event.preventDefault();
|
||
|
||
const linkIdx = parseInt($(this).data('link'), 10);
|
||
const targetY = linkData[linkIdx];
|
||
const scrollMap = [ 0, 0, 0.25, 0.5, 0.75, 1, 1 ];
|
||
const lastMap = [ 0, 0, 0, 0, 0, 0, 1 ];
|
||
|
||
console.log('▶ CLICK', linkIdx, '→ scroll to', targetY);
|
||
|
||
if (blockNavigation || skipMode) {
|
||
console.log(' 🚫 navigation locked (blockNavigation=', blockNavigation, 'skipMode=', skipMode, ')');
|
||
return;
|
||
}
|
||
|
||
// lock UI & fade out
|
||
skipMode = true;
|
||
$('.header__menu').addClass('blocked');
|
||
gsap.to('.home-page', { duration: 0.4, autoAlpha: 0 });
|
||
console.log(' → fading out');
|
||
|
||
setTimeout(() => {
|
||
console.log('▶ ANIMATION START');
|
||
console.log(' st.scroll(', targetY, ')');
|
||
st.scroll(targetY);
|
||
|
||
// master timelines
|
||
console.log(' tlScroll →', scrollMap[linkIdx]);
|
||
console.log(' tlScrollLast →', lastMap[linkIdx]);
|
||
tlScroll .progress(scrollMap[linkIdx]);
|
||
tlScrollLast.progress(lastMap[linkIdx]);
|
||
|
||
// section‐by‐section reset (your original logic unrolled into a loop)
|
||
const sectionTGs = [
|
||
tl1, tl11, tl3, tl31,
|
||
tl4, tl41, tl5, tl51,
|
||
tl6, tl61, tl7
|
||
];
|
||
sectionTGs.forEach((tl, i) => {
|
||
const prog = (i < linkIdx) ? 1 : 0;
|
||
console.log(` section[${i}] → ${prog}`);
|
||
tl.progress(prog).pause();
|
||
});
|
||
|
||
// title timelines
|
||
const titleTGs = [ tlTitle2, tlTitle3, tlTitle4, tlTitle5, tlTitle6, tlTitle7 ];
|
||
titleTGs.forEach((ttl, i) => {
|
||
const prog = (i + 1 === linkIdx) ? 1 : 0;
|
||
console.log(` title[${i+2}] → ${prog}`);
|
||
ttl.progress(prog).pause();
|
||
});
|
||
|
||
// reposition
|
||
gsap.set(titles, { y: '100%' });
|
||
gsap.set(titles[linkIdx], { y: '0' });
|
||
gsap.set(sections, { xPercent: -100 * linkIdx, ease: 'none' }, 0);
|
||
console.log(' moved panels to', -100 * linkIdx, '%');
|
||
|
||
// menu UI
|
||
$('.header__menu li').removeClass('active')
|
||
.eq(linkIdx).addClass('active');
|
||
|
||
// fade back in
|
||
gsap.to('.home-page', {
|
||
duration: 0.5,
|
||
autoAlpha: 1,
|
||
onComplete() {
|
||
console.log('▶ ANIMATION END — unlocking');
|
||
skipMode = false;
|
||
$('.header__menu').removeClass('blocked');
|
||
}
|
||
});
|
||
}, 500);
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
|
||
$(document).on('click', '.projects__menu a', function (event) {
|
||
event.preventDefault();
|
||
let parent = $(this).parent(),
|
||
progress = projectHeightsScroll[parent.index()] / (projectHeightsTotal - $('.projects__blocks').innerHeight()),
|
||
scrollTo = parseInt(linkData[1]) + addBlocksScroll*2 + projectBlocksScroll*progress;
|
||
st.scroll(scrollTo);
|
||
});
|
||
$(document).on('click', '.news__menu a', function () {
|
||
event.preventDefault();
|
||
let parent = $(this).parent(),
|
||
progress = newsHeightsScroll[parent.index()] / (newsHeightsTotal - $('.news__blocks').innerHeight()),
|
||
scrollTo = parseInt(linkData[5]) + addBlocksScroll + newsBlocksScroll*progress;
|
||
st.scroll(scrollTo);
|
||
});
|
||
} else {
|
||
$(document).on('click', '.js-scroll-link', function (event) {
|
||
event.preventDefault();
|
||
let href = $(this).attr('href'),
|
||
topPos = $(href).offset(),
|
||
header = $('.header').height();
|
||
$("html, body").animate({scrollTop: topPos.top - header}, 500);
|
||
});
|
||
}
|
||
}
|
||
}); |