gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
gsap.config({
autoSleep: 120,
force3D: true,
nullTargetWarn: false,
trialWarn: false
});
const BGcolor = document.querySelector(".bg-color");
const tl = gsap.timeline({
scrollTrigger: {
trigger: ".scene-1-alt",
endTrigger: ".scene-3-alt",
pin: false,
anticipatePin: 1,
scrub: 1,
end: "bottom"
}
});
tl.to(
BGcolor,
{
duration: 1,
backgroundColor: "#e268a0",
ease: "none"
},
0
)
.to(
BGcolor,
{
duration: 1.5,
backgroundColor: "#e95868",
ease: "none"
},
1
)
.to(
BGcolor,
{
duration: 1.5,
backgroundColor: "#7ecbdb",
ease: "none"
},
2
);
gsap.to(".brush-2", {
scrollTrigger: {
pin: true,
anticipatePin: 1,
scrub: 1,
trigger: ".brush-2",
start: "center center",
endTrigger: ".scene-4-alt",
end: "center+=800px",
invalidateOnRefresh: true
}
});
gsap.to(".pagination", {
scrollTrigger: {
pin: false,
pinSpacing: true,
anticipatePin: 1,
scrub: 1,
trigger: ".scene-1-alt",
start: "bottom bottom",
endTrigger: ".scene-6-alt",
end: "bottom bottom",
invalidateOnRefresh: true,
toggleClass: {
targets: ".pagination",
className: "fixed"
}
}
});
const navLinks = gsap.utils.toArray(".pagination .number");
navLinks.forEach((btn, index) => {
btn.addEventListener("click", () => {
gsap.to(window, {
duration: 1,
scrollTo: {
y: "#scene-" + (index + 1) + "-alt",
offsetY: 0
}
});
});
});
const panels = gsap.utils.toArray(".scene-vorteile-alt");
panels.forEach((panel, i) => {
ScrollTrigger.create({
trigger: panel,
start: "top center",
end: "bottom",
onLeave: () => {
navLinks.forEach((e) => {
e.classList.remove("active");
});
navLinks[i].classList.add("active");
},
onEnterBack: () => {
navLinks.forEach((e) => {
e.classList.remove("active");
});
navLinks[i].classList.add("active");
}
});
});
gsap.to(".pagination-2", {
scrollTrigger: {
pin: "false",
pinSpacing: true,
anticipatePin: 1,
scrub: 1,
trigger: ".scene-7-alt",
start: "bottom bottom",
endTrigger: ".scene-7-alt",
end: "bottom+=600%",
invalidateOnRefresh: true,
toggleClass: {
targets: ".pagination-2",
className: "fixed"
}
}
});
const paglinks = gsap.utils.toArray(".pagination-2 .number");
paglinks.forEach((link, i) => {
link.addEventListener("click", (e) => {
e.preventDefault();
gsap.to(window, {
scrollTo: {
y: "#scene-" + (i + 4) + "-alt",
offsetY: 0
}
});
});
});
// const detailpanels = gsap.utils.toArray(".scene-details-alt");
// detailpanels.forEach((section, j) => {
// ScrollTrigger.create({
// trigger: section,
// start: 'top+=2000',
// end: () => "+=" + detailpanels.offsetHeight,
// onEnter: () => {
// paglinks.forEach((e) => {
// e.classList.remove("active");
// });
// paglinks[j].classList.add("active");
// },
// onEnterBack: () => {
// paglinks.forEach((e) => {
// e.classList.remove("active");
// });
// paglinks[j].classList.add("active");
// }
// });
// console.log(paglinks[j]);
// console.log(section, j);
// });
let containers = document.querySelectorAll(".main-container-animation");
if (containers.length > 0) {
containers.forEach((container) => {
var sections = container.querySelectorAll(".scene-details-alt");
sections.forEach((section, j) => {
var panel_id = section.id;
gsap.to(section, {
scrollTrigger: {
trigger: section,
start: "top+=1400px",
end: () => "+=" + container.offsetWidth,
markers: false,
onLeave: () => {
paglinks.forEach((e) => {
e.classList.remove("active");
});
paglinks[j].classList.add("active");
},
onEnterBack: () => {
paglinks.forEach((e) => {
e.classList.remove("active");
});
paglinks[j].classList.add("active");
}
}
});
console.log(section.id);
console.log(section);
});
});
}
var scene1 = gsap.timeline({
scrollTrigger: {
trigger: ".scene-1-alt",
pin: true,
anticipatePin: 1,
scrub: 0.25,
start: "top",
end: "bottom",
invalidateOnRefresh: true
}
});
var scene2 = gsap.timeline({
scrollTrigger: {
trigger: ".scene-2-alt",
pin: true,
anticipatePin: 1,
scrub: 0.25,
start: "top",
end: "bottom",
invalidateOnRefresh: true
}
});
var scene3 = gsap.timeline({
scrollTrigger: {
trigger: ".scene-3-alt",
pin: ".scene-3-alt",
anticipatePin: 1,
scrub: 0.25,
start: "top",
end: "bottom",
invalidateOnRefresh: true
}
});
var scene4 = gsap.timeline({
scrollTrigger: {
trigger: ".scene-4-alt",
pin: true,
anticipatePin: 1,
scrub: 0.25,
start: "top",
end: "bottom ",
invalidateOnRefresh: true
}
});
var scene5 = gsap.timeline({
scrollTrigger: {
trigger: ".scene-5-alt",
pin: true,
anticipatePin: 1,
scrub: 0.25,
start: "top",
end: "bottom",
invalidateOnRefresh: true
}
});
var scene6 = gsap.timeline({
scrollTrigger: {
trigger: ".scene-6-alt",
pin: true,
anticipatePin: 1,
scrub: 0.25,
start: "top",
end: "bottom",
invalidateOnRefresh: true
}
});
var scene7 = gsap.timeline({
scrollTrigger: {
trigger: ".scene-7-alt",
pin: true,
anticipatePin: 0,
scrub: 0.25,
start: "top",
end: "bottom",
invalidateOnRefresh: true
}
});
var sceneBrush = gsap.timeline({
scrollTrigger: {
trigger: "#scene-brush-alt",
endTrigger: ".scene-7-alt",
pin: true,
anticipatePin: 0,
scrub: 0.25,
start: "top",
end: "bottom",
invalidateOnRefresh: true
}
});
ScrollTrigger.matchMedia({
"(min-width: 992px)": function () {
gsap.set(".bigbrush-image", {
x: "100vw"
});
var rotate = gsap
.timeline({
scrollTrigger: {
trigger: ".kong-brush_start",
endTrigger: ".kong-brush-end",
pin: true,
scrub: 0.2,
start: "top-=800px",
end: "top",
invalidateOnRefresh: true
}
})
.to(".bigbrush-image", {
x: "0vw",
scale: 0.7,
duration: 0.2
})
.to(
".bigbrush-image",
{
rotation: -180,
duration: 0.3,
scale: 0.45,
transformOrigin: "70% 45%"
// ease: "power3.inOut"
},
"<"
);
gsap.set(".cap-image", {
xPercent: 50
});
var travel = gsap
.timeline({
scrollTrigger: {
trigger: ".cap-brush-start",
endTrigger: ".scene-7-alt",
pin: true,
scrub: 0.2,
start: "top top",
end: "top",
invalidateOnRefresh: true
}
})
.to(".cap-image", {
xPercent: 0,
yPercent: -300,
scale: 0.25,
duration: 0
})
.to(
".cap-image",
{
xPercent: 0,
yPercent: 11,
duration: 0.3,
scale: 0.25,
transformOrigin: "70% 0%"
// ease: "power3.inOut"
},
"<"
);
},
"(max-width: 991px)": function () {
gsap.set(".bigbrush-image", {
x: "100vw"
});
var rotate = gsap
.timeline({
scrollTrigger: {
trigger: ".kong-brush_start",
endTrigger: ".kong-brush-end",
pin: true,
scrub: 0.2,
start: "top-=800px",
end: "top",
invalidateOnRefresh: true
}
})
.to(".bigbrush-image", {
x: "0vw",
scale: 0.7,
duration: 0.2
})
.to(
".bigbrush-image",
{
rotation: -180,
duration: 0.3,
scale: 0.45,
transformOrigin: "50% 46%"
// ease: "power3.inOut"
},
"<"
);
gsap.set(".cap-image", {
x: "0vw"
});
var travel = gsap
.timeline({
scrollTrigger: {
trigger: ".cap-brush-start",
endTrigger: ".scene-7-alt",
pin: true,
scrub: 0.2,
start: "top top",
end: "top",
invalidateOnRefresh: true
}
})
.to(".cap-image", {
xPercent: 0,
yPercent: -300,
scale: 0.25,
duration: 0
})
.to(
".cap-image",
{
yPercent: 4,
duration: 0.3,
scale: 0.25,
transformOrigin: "50% 0%"
// ease: "power3.inOut"
},
"<"
);
},
"(max-width: 767px)": function () {
gsap.set(".bigbrush-image", {
x: "100vw"
});
var rotate = gsap
.timeline({
scrollTrigger: {
trigger: ".kong-brush_start",
endTrigger: ".kong-brush-end",
pin: true,
scrub: 0.2,
start: "top-=800px",
end: "top",
invalidateOnRefresh: true
}
})
.to(".bigbrush-image", {
x: "0vw",
scale: 0.7,
duration: 0.2
})
.to(
".bigbrush-image",
{
rotation: -180,
duration: 0.3,
scale: 0.45,
transformOrigin: "50% 45%"
// ease: "power3.inOut"
},
"<"
);
gsap.set(".cap-image", {
x: "0vw"
});
var travel = gsap
.timeline({
scrollTrigger: {
trigger: ".cap-brush-start",
endTrigger: ".scene-7-alt",
pin: true,
scrub: 0.2,
start: "top top",
end: "top",
invalidateOnRefresh: true
}
})
.to(".cap-image", {
xPercent: 0,
yPercent: -300,
scale: 0.25,
duration: 0
})
.to(
".cap-image",
{
yPercent: 16,
duration: 0.3,
scale: 0.25,
transformOrigin: "50% 0%"
// ease: "power3.inOut"
},
"<"
);
},
"(max-width: 557px)": function () {
gsap.set(".bigbrush-image", {
x: "100vw"
});
var rotate = gsap
.timeline({
scrollTrigger: {
trigger: ".kong-brush_start",
endTrigger: ".kong-brush-end",
pin: true,
scrub: 0.2,
start: "top-=800px",
end: "top",
invalidateOnRefresh: true
}
})
.to(".bigbrush-image", {
x: "0vw",
scale: 0.7,
duration: 0.2
})
.to(
".bigbrush-image",
{
rotation: -180,
duration: 0.3,
scale: 0.45,
transformOrigin: "50% 39%"
// ease: "power3.inOut"
},
"<"
);
gsap.set(".cap-image", {
x: "0vw"
});
var travel = gsap
.timeline({
scrollTrigger: {
trigger: ".cap-brush-start",
endTrigger: ".scene-7-alt",
pin: true,
scrub: 0.2,
start: "top top",
end: "top",
invalidateOnRefresh: true
}
})
.to(".cap-image", {
xPercent: 0,
yPercent: -300,
scale: 0.25,
duration: 0
})
.to(
".cap-image",
{
yPercent: 28,
duration: 0.3,
scale: 0.25,
transformOrigin: "50% 0%"
// ease: "power3.inOut"
},
"<"
);
}
});
ScrollTrigger.refresh(true);
!
