mirror of
https://github.com/Start9Labs/start9.com.git
synced 2026-03-26 10:21:54 +00:00
1134 lines
27 KiB
JavaScript
1134 lines
27 KiB
JavaScript
gsap.registerPlugin(DrawSVGPlugin);
|
|
gsap.registerPlugin(CustomEase);
|
|
|
|
var bodyRect = document.body.getBoundingClientRect();
|
|
|
|
const sections = [
|
|
"pitch",
|
|
"products",
|
|
"infographics",
|
|
"bitcoin",
|
|
"be-your-own",
|
|
"powered-by",
|
|
"support",
|
|
"dev",
|
|
"community",
|
|
];
|
|
|
|
const bitcoinServices = [
|
|
"balanceofsatoshis",
|
|
"bitcoind",
|
|
"btc-rpc-proxy",
|
|
"btcpayserver",
|
|
"c-lightning",
|
|
"electrs",
|
|
"lightning-jet",
|
|
"lnd",
|
|
"lightning-terminal",
|
|
"lndg",
|
|
"mempool",
|
|
"ride-the-lightning",
|
|
"spark-wallet",
|
|
"specter",
|
|
"sphinx-relay",
|
|
"thunderhub",
|
|
];
|
|
|
|
//const defaultActions = "restart none none reverse";
|
|
const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, and onLeaveBack
|
|
// "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".
|
|
|
|
//////////////////////////////////////////
|
|
// AUTO APPLY URL ANCHORS
|
|
|
|
// setTimeout(function () {
|
|
// // timeout to allow initial load to redirect to anchor
|
|
// // TODO: maybe apply the scroll-behavior: smooth to HTML after a timeout
|
|
|
|
// sections.forEach((slug) => {
|
|
// ScrollTrigger.create({
|
|
// trigger: "#" + slug,
|
|
// start: "top center",
|
|
// end: "bottom center",
|
|
// //markers: { startColor: "white", endColor: "white" },
|
|
// onEnter: () => {
|
|
// window.location.href = "#" + slug;
|
|
// },
|
|
// onEnterBack: () => {
|
|
// window.location.href = "#" + slug;
|
|
// },
|
|
// });
|
|
// });
|
|
// }, 2000);
|
|
|
|
//////////////////////////////////////////
|
|
// MENU
|
|
|
|
let menuOpen = document.getElementById("menu-open"),
|
|
menuClose = document.getElementById("menu-close"),
|
|
openedMenuArray = gsap.utils.toArray(".opened-menu"),
|
|
closedMenuArray = gsap.utils.toArray(".closed-menu");
|
|
|
|
menuOpen.addEventListener("click", (e) => openMenu(e));
|
|
menuClose.addEventListener("click", (e) => closeMenu(e));
|
|
|
|
function openMenu(e) {
|
|
e.preventDefault();
|
|
gsap.to("#menu", { y: "0vh" });
|
|
gsap.to("main", { y: "100vh" });
|
|
gsap.to(openedMenuArray, { x: "0", opacity: 1, width: "auto" });
|
|
gsap.to(closedMenuArray, { x: "3rem", opacity: 0, width: 0 });
|
|
gsap.to("html", { overflow: "hidden" });
|
|
}
|
|
function closeMenu(e) {
|
|
e.preventDefault();
|
|
gsap.to("#menu", { y: "-100vh" });
|
|
gsap.to("main", { y: "0vh" });
|
|
gsap.to(closedMenuArray, { x: "0", opacity: 1, width: "auto" });
|
|
gsap.to(openedMenuArray, { x: "3rem", opacity: 0, width: 0 });
|
|
gsap.to("html", { overflow: "overlay" });
|
|
}
|
|
|
|
//////////////////////////////////////////
|
|
// HERO
|
|
|
|
gsap.from("#hero-image", {
|
|
duration: 1,
|
|
//y: "-10rem",
|
|
scale: 0.95,
|
|
opacity: 0,
|
|
filter: "blur(10px)",
|
|
delay: 0.5,
|
|
});
|
|
gsap.from("#logo", {
|
|
duration: 0.5,
|
|
y: "-5rem",
|
|
opacity: 0,
|
|
delay: 1.25,
|
|
//ease: "in-out"
|
|
});
|
|
//gsap.config({trialWarn: false});
|
|
|
|
// create the smooth scroller FIRST!
|
|
// ScrollSmoother.create({
|
|
// smooth: 2, // seconds it takes to "catch up" to native scroll position
|
|
// effects: true, // look for data-speed and data-lag attributes on elements and animate accordingly
|
|
// wrapper: '.scroll_track',
|
|
// content: '.scroll_track_content'
|
|
// });
|
|
|
|
// backdrop-filter: blur(10px);
|
|
//background-color: rgba(0,0,0,0.1);
|
|
|
|
//////////////////////////////////////////
|
|
// HEADER
|
|
|
|
gsap.to("header", {
|
|
duration: 0.5,
|
|
backgroundColor: "rgba(0,0,0,0.1)",
|
|
backdropFilter: "blur(10px)",
|
|
scrollTrigger: {
|
|
trigger: "#hero-image",
|
|
scrub: true,
|
|
start: "center top", // "triggerElement page"
|
|
end: "bottom top", // "triggerElement page"
|
|
},
|
|
});
|
|
|
|
gsap.to(".header__logo", {
|
|
duration: 0.5,
|
|
opacity: "1",
|
|
filter: "blur(0px)",
|
|
scrollTrigger: {
|
|
trigger: "#hero-image",
|
|
scrub: true,
|
|
start: "center top", // "triggerElement page"
|
|
end: "bottom top", // "triggerElement page"
|
|
},
|
|
});
|
|
|
|
gsap.from("#hero-to-pitch path:first-child", {
|
|
drawSVG: 0,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: "#hero-to-pitch",
|
|
scrub: true,
|
|
start: "top center", // "triggerElement page"
|
|
end: "bottom center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
//////////////////////////////////////////
|
|
// PITCH
|
|
|
|
gsap.from("#pitch", {
|
|
duration: 0.5,
|
|
y: "5rem",
|
|
scale: 0.9,
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
scrollTrigger: {
|
|
trigger: "#pitch",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
//////////////////////////////////////////
|
|
// PRODUCTS
|
|
|
|
gsap.from("#products .subsection:nth-child(1)", {
|
|
duration: 0.5,
|
|
opacity: 0,
|
|
outline: "1px solid rgba(255,255,255,1)",
|
|
//filter: "blur(10px)",
|
|
scrollTrigger: {
|
|
trigger: "#products",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#products .subsection:nth-child(2)", {
|
|
duration: 0.5,
|
|
delay: 0.25,
|
|
opacity: 0,
|
|
outline: "1px solid rgba(255,255,255,1)",
|
|
//filter: "blur(10px)",
|
|
scrollTrigger: {
|
|
trigger: "#products",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
const buyAnchor = document.querySelector('.product--buy')
|
|
|
|
const buyTL = gsap
|
|
.timeline({paused:true})
|
|
.from('#buy-lines path:first-child', {drawSVG:0, ease:'none', duration: 0.75}, 0)
|
|
.to('.product--buy img:first-child', {opacity:0, ease:'none', duration: 0.25}, 0);
|
|
|
|
buyAnchor.onmouseenter = () => buyTL.play()
|
|
buyAnchor.onmouseleave = () => buyTL.reverse()
|
|
|
|
const diyAnchor = document.querySelector('.product--diy')
|
|
|
|
const diyTL = gsap
|
|
.timeline({paused:true})
|
|
.from('#diy-lines path:first-child', {drawSVG:0, ease:'none', duration: 0.75}, 0)
|
|
.to('.product--diy img:first-child', {opacity:0, ease:'none', duration: 0.25}, 0);
|
|
|
|
diyAnchor.onmouseenter = () => diyTL.play()
|
|
diyAnchor.onmouseleave = () => diyTL.reverse()
|
|
|
|
|
|
gsap.from("#products-to-info path:first-child", {
|
|
drawSVG: 0,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: "#products-to-info path:first-child",
|
|
scrub: true,
|
|
start: "top center", // "triggerElement page"
|
|
end: "bottom center", // "triggerElement page"
|
|
},
|
|
});
|
|
|
|
gsap.from("#products-to-info path:nth-child(2)", {
|
|
drawSVG: 0,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: "#products-to-info path:nth-child(2)",
|
|
scrub: true,
|
|
start: "top center", // "triggerElement page"
|
|
end: "bottom center", // "triggerElement page"
|
|
},
|
|
});
|
|
|
|
gsap.from("#products-to-info path:nth-child(3)", {
|
|
drawSVG: 0,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: "#products-to-info path:nth-child(3)",
|
|
scrub: true,
|
|
start: "top center", // "triggerElement page"
|
|
end: "bottom center", // "triggerElement page"
|
|
},
|
|
});
|
|
|
|
//////////////////////////////////////////
|
|
// INFOGRAPHICS
|
|
|
|
gsap.from("#infographics .subsection:nth-child(1)", {
|
|
duration: 0.5,
|
|
//y: "5rem",
|
|
//scale: 0.8,
|
|
//rotateX: 15,
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
outline: "1px solid rgba(255,255,255,1)",
|
|
//filter: "blur(10px)",
|
|
scrollTrigger: {
|
|
trigger: "#infographics .subsection:nth-child(1)",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#infographics .subsection:nth-child(2)", {
|
|
duration: 0.5,
|
|
//y: "5rem",
|
|
//scale: 0.8,
|
|
//rotateX: 15,
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
outline: "1px solid rgba(255,255,255,1)",
|
|
//filter: "blur(10px)",
|
|
scrollTrigger: {
|
|
trigger: "#infographics .subsection:nth-child(2)",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
//////////////////////////////////////////
|
|
// BITCOIN
|
|
|
|
gsap.from("#bitcoin .subsection:nth-of-type(1)", {
|
|
duration: 1,
|
|
opacity: 0,
|
|
//outline: "1px solid rgba(255,255,255,1)",
|
|
filter: "blur(10px)",
|
|
y: "5rem",
|
|
scrollTrigger: {
|
|
trigger: "#bitcoin .subsection:nth-of-type(1)",
|
|
start: "top bottom", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#bitcoin .subsection:nth-of-type(2)", {
|
|
duration: 1,
|
|
opacity: 0,
|
|
//outline: "1px solid rgba(255,255,255,1)",
|
|
filter: "blur(10px)",
|
|
y: "-5rem",
|
|
scrollTrigger: {
|
|
trigger: "#bitcoin .subsection:nth-of-type(2)",
|
|
start: "top bottom", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
function getRandomInt(min, max) {
|
|
min = Math.ceil(min);
|
|
max = Math.floor(max);
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
}
|
|
|
|
function getRandomNumber(min, max) {
|
|
return Math.random() * (max - min) + min;
|
|
}
|
|
|
|
bitcoinServices.forEach((service) => {
|
|
const serviceElement = document.querySelector(".service-icon--" + service);
|
|
const bitcoinSectionElement = document.querySelector("#bitcoin");
|
|
const upOrDown = getRandomInt(0, 1);
|
|
const bitcoinHeight = bitcoinSectionElement.clientHeight;
|
|
|
|
serviceElement
|
|
? (serviceElement.style.left = getRandomInt(5, 90) + "vw")
|
|
: "";
|
|
|
|
if (upOrDown) {
|
|
gsap.set(".service-icon--" + service, {
|
|
y: getRandomInt(0, bitcoinHeight / 2) + "px",
|
|
});
|
|
gsap.to(".service-icon--" + service, {
|
|
y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
|
|
//x: getRandomInt(0, 100) + "vw",
|
|
ease: "in",
|
|
delay: getRandomNumber(0, 1),
|
|
scrollTrigger: {
|
|
trigger: "#bitcoin",
|
|
scrub: true,
|
|
start: "top 25%", // "triggerElement page"
|
|
end: "90% center", // "triggerElement page"
|
|
//markers: { startColor: "lime", endColor: "lime" },
|
|
},
|
|
});
|
|
} else {
|
|
gsap.set(".service-icon--" + service, {
|
|
y: getRandomInt(bitcoinHeight / 2, bitcoinHeight) + "px",
|
|
});
|
|
gsap.to(".service-icon--" + service, {
|
|
y: getRandomInt(0, bitcoinHeight / 2) + "px",
|
|
//x: getRandomInt(0, 100) + "vw",
|
|
ease: "in",
|
|
delay: getRandomNumber(0, 1),
|
|
scrollTrigger: {
|
|
trigger: "#bitcoin",
|
|
scrub: true,
|
|
start: "top bottom", // "triggerElement page"
|
|
end: "90% center", // "triggerElement page"
|
|
//markers: { startColor: "orange", endColor: "orange" },
|
|
},
|
|
});
|
|
}
|
|
});
|
|
|
|
gsap.from("#bitcoin-to-be path:first-child", {
|
|
drawSVG: 0,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: "#bitcoin-to-be",
|
|
scrub: true,
|
|
start: "top center",
|
|
end: "bottom center",
|
|
},
|
|
});
|
|
|
|
//////////////////////////////////////////
|
|
// BE YOUR OWN
|
|
|
|
gsap.from("#be-your-own h1", {
|
|
duration: 0.5,
|
|
y: "5rem",
|
|
//scale: 0.8,
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
scrollTrigger: {
|
|
trigger: "#be-your-own",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#be-your-own p", {
|
|
duration: 0.5,
|
|
y: "5rem",
|
|
filter: "blur(10px)",
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
scrollTrigger: {
|
|
trigger: "#be-your-own h1",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#be-your-own #ticker", {
|
|
duration: 1.5,
|
|
filter: "blur(20px)",
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
scrollTrigger: {
|
|
trigger: "#be-your-own #ticker",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
let pseudoserviceArray = gsap.utils.toArray(".pseudoservice"),
|
|
next = 3, // time to change
|
|
itemHeight = document
|
|
.querySelector(".pseudoservice")
|
|
.getBoundingClientRect().height,
|
|
listHeight = document
|
|
.querySelector(".pseudoservices")
|
|
.getBoundingClientRect().height,
|
|
windowHeight = document.getElementById("ticker__window").clientHeight,
|
|
kerplunk = CustomEase.create(
|
|
"custom",
|
|
"M0,0 C0.126,0.382 0.066,0.863 0.198,1.036 0.25,1.104 0.264,0.982 0.326,0.982 0.344,0.982 0.489,0.998 0.516,1 0.65,1.007 0.863,1 1,1 "
|
|
),
|
|
kerplunk2 = CustomEase.create(
|
|
"custom",
|
|
"M0,0 C0.126,0.382 0.178,0.802 0.288,1.052 0.303,1.088 0.372,0.99 0.434,0.99 0.502,0.99 0.497,1 0.524,1 0.664,1 0.863,1 1,1 "
|
|
);
|
|
|
|
function crossfade() {
|
|
var action = gsap
|
|
.timeline()
|
|
.to(pseudoserviceArray, {
|
|
id: "thunk",
|
|
y: "-=" + itemHeight,
|
|
duration: 1,
|
|
ease: kerplunk2,
|
|
})
|
|
.to(pseudoserviceArray[0], { y: "+=" + listHeight, duration: 0 }); // the first to the end
|
|
|
|
pseudoserviceArray.push(pseudoserviceArray.shift()); // the first (shift) to the end (push) from the array
|
|
//console.log(pseudoserviceArray);
|
|
//console.log(itemHeight);
|
|
|
|
// start endless run
|
|
gsap.delayedCall(next, crossfade);
|
|
|
|
var thisPseudoservice = pseudoserviceArray[2].innerHTML,
|
|
thisElement = document.querySelector(
|
|
".slides-container--" + thisPseudoservice.toLowerCase()
|
|
);
|
|
|
|
var slidesContainerArray = document.querySelectorAll(".slides-container");
|
|
slidesContainerArray.forEach((thisContainer) => {
|
|
thisContainer.style.display = "none";
|
|
});
|
|
|
|
if (thisElement) {
|
|
thisElement.style.display = "flex";
|
|
}
|
|
}
|
|
|
|
// start the crossfade after next = 3 sec
|
|
gsap.delayedCall(next, crossfade);
|
|
|
|
document.querySelector(".services").addEventListener("mouseenter", pauseThunk);
|
|
// TODO: pause not working - Id not found
|
|
function pauseThunk() {
|
|
console.log("asfd");
|
|
gsap.getById("thunk").kill();
|
|
}
|
|
|
|
// CAROUSEL
|
|
|
|
var slideDelay = 1.5;
|
|
var slideDuration = 0.3;
|
|
var wrap = true;
|
|
|
|
var slides = document.querySelectorAll(".slide");
|
|
var prevButton = document.querySelector("#prevButton");
|
|
var nextButton = document.querySelector("#nextButton");
|
|
var progressWrap = gsap.utils.wrap(0, 1);
|
|
|
|
var numSlides = slides.length;
|
|
|
|
gsap.set(slides, {
|
|
xPercent: (i) => i * 100,
|
|
});
|
|
|
|
var wrapX = gsap.utils.wrap(-100, (numSlides - 1) * 100);
|
|
|
|
var animation = gsap.to(slides, {
|
|
xPercent: "+=" + numSlides * 100,
|
|
duration: 1,
|
|
ease: "none",
|
|
paused: true,
|
|
repeat: -1,
|
|
modifiers: {
|
|
xPercent: wrapX,
|
|
},
|
|
});
|
|
|
|
var proxy = document.createElement("div");
|
|
var slideAnimation = gsap.to({}, {});
|
|
var slideWidth = 0;
|
|
var wrapWidth = 0;
|
|
|
|
resize();
|
|
|
|
window.addEventListener("resize", resize);
|
|
|
|
prevButton.addEventListener("click", function () {
|
|
animateSlides(1);
|
|
});
|
|
|
|
nextButton.addEventListener("click", function () {
|
|
animateSlides(-1);
|
|
});
|
|
|
|
// function updateDraggable() {
|
|
// slideAnimation.kill();
|
|
// this.update();
|
|
// }
|
|
|
|
function animateSlides(direction) {
|
|
slideAnimation.kill();
|
|
var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);
|
|
|
|
slideAnimation = gsap.to(proxy, {
|
|
x: x,
|
|
duration: slideDuration,
|
|
onUpdate: updateProgress,
|
|
});
|
|
}
|
|
|
|
function updateProgress() {
|
|
animation.progress(progressWrap(gsap.getProperty(proxy, "x") / wrapWidth));
|
|
}
|
|
|
|
function snapX(value) {
|
|
let snapped = gsap.utils.snap(slideWidth, value);
|
|
return wrap
|
|
? snapped
|
|
: gsap.utils.clamp(-slideWidth * (numSlides - 1), 0, snapped);
|
|
}
|
|
|
|
function resize() {
|
|
var norm = gsap.getProperty(proxy, "x") / wrapWidth || 0;
|
|
|
|
slideWidth = slides[0].offsetWidth;
|
|
wrapWidth = slideWidth * numSlides;
|
|
|
|
wrap; // || draggable.applyBounds({minX: -slideWidth * (numSlides - 1), maxX: 0});
|
|
|
|
gsap.set(proxy, {
|
|
x: norm * wrapWidth,
|
|
});
|
|
|
|
animateSlides(0);
|
|
slideAnimation.progress(1);
|
|
}
|
|
|
|
gsap.from("#be-to-powered path", {
|
|
drawSVG: 0,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: "#be-to-powered path",
|
|
scrub: true,
|
|
start: "top center",
|
|
end: "bottom center",
|
|
},
|
|
});
|
|
|
|
//////////////////////////////////////////
|
|
// POWERED
|
|
|
|
gsap.from("#powered-by h1", {
|
|
duration: 0.5,
|
|
y: "-5rem",
|
|
//scale: 0.8,
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
scrollTrigger: {
|
|
trigger: "#powered-by h1",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#powered-by p", {
|
|
duration: 0.5,
|
|
//y: "-10rem",
|
|
filter: "blur(10px)",
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
scrollTrigger: {
|
|
trigger: "#powered-by h1",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#powered-by svg", {
|
|
duration: 1,
|
|
//y: "-10rem",
|
|
filter: "blur(20px)",
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
scrollTrigger: {
|
|
trigger: "#powered-by svg",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#powered-to-support path", {
|
|
drawSVG: 0,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: "#powered-to-support path",
|
|
scrub: true,
|
|
start: "top center",
|
|
end: "bottom center",
|
|
},
|
|
});
|
|
|
|
//////////////////////////////////////////
|
|
// SUPPORT
|
|
|
|
gsap.from("#support", {
|
|
duration: 0.5,
|
|
//y: "5rem",
|
|
//scale: 0.8,
|
|
//rotateX: 15,
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
outline: "1px solid rgba(255,255,255,1)",
|
|
//filter: "blur(10px)",
|
|
scrollTrigger: {
|
|
trigger: "#support",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#support-to-dev path", {
|
|
drawSVG: 0,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: "#support-to-dev path",
|
|
scrub: true,
|
|
start: "top center",
|
|
end: "bottom center",
|
|
},
|
|
});
|
|
|
|
//////////////////////////////////////////
|
|
// DEV
|
|
|
|
gsap.from("#dev", {
|
|
duration: 0.5,
|
|
//y: "5rem",
|
|
scale: 0.8,
|
|
//rotateX: 15,
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
//outline: "1px solid rgba(255,255,255,1)",
|
|
filter: "blur(10px)",
|
|
scrollTrigger: {
|
|
trigger: "#dev",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#dev .col:nth-child(1)", {
|
|
duration: 0.5,
|
|
x: "5rem",
|
|
//scale: 0.8,
|
|
//rotateX: 15,
|
|
opacity: 0,
|
|
delay: 0.5,
|
|
//outline: "1px solid rgba(255,255,255,1)",
|
|
filter: "blur(10px)",
|
|
scrollTrigger: {
|
|
trigger: "#dev",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#dev .col:nth-child(2)", {
|
|
duration: 0.5,
|
|
x: "-5rem",
|
|
scale: 0.5,
|
|
//rotateX: 15,
|
|
opacity: 0,
|
|
delay: 0.75,
|
|
//outline: "1px solid rgba(255,255,255,1)",
|
|
filter: "blur(10px)",
|
|
scrollTrigger: {
|
|
trigger: "#dev",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
gsap.from("#dev-to-contact path", {
|
|
drawSVG: 0,
|
|
ease: "none",
|
|
scrollTrigger: {
|
|
trigger: "#dev-to-contact path",
|
|
scrub: true,
|
|
start: "top center",
|
|
end: "bottom center",
|
|
},
|
|
});
|
|
|
|
//////////////////////////////////////////
|
|
// CONTACT
|
|
|
|
gsap.from("#community", {
|
|
duration: 0.5,
|
|
//y: "5rem",
|
|
scale: 0.8,
|
|
//rotateX: 15,
|
|
opacity: 0,
|
|
//delay: 0.75,
|
|
//outline: "1px solid rgba(255,255,255,1)",
|
|
filter: "blur(10px)",
|
|
scrollTrigger: {
|
|
trigger: "#community",
|
|
start: "top center", // "triggerElement page"
|
|
toggleActions: defaultActions,
|
|
},
|
|
});
|
|
|
|
//Librarys
|
|
|
|
/*
|
|
var imagesLoaded = require('imagesloaded');
|
|
import barba from '@barba/core';
|
|
import LocomotiveScroll from 'locomotive-scroll';
|
|
import { gsap } from "gsap";
|
|
import { Draggable } from "gsap/Draggable";
|
|
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
import { InertiaPlugin } from "gsap/InertiaPlugin";
|
|
import { SplitText } from "gsap/SplitText";
|
|
|
|
gsap.registerPlugin(Draggable, ScrollToPlugin, ScrollTrigger, InertiaPlugin, SplitText);
|
|
|
|
|
|
|
|
|
|
// Locomotive Scroll
|
|
const scroll = new LocomotiveScroll({
|
|
el: document.querySelector('[data-scroll-container]'),
|
|
smooth: true,
|
|
tablet: {
|
|
breakpoint: 961
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
// Use Locomotive Scroll with ScrollTrigger
|
|
scroll.on("scroll", ScrollTrigger.update);
|
|
|
|
ScrollTrigger.scrollerProxy(".locomotive", {
|
|
scrollTop(value) {
|
|
return arguments.length ? scroll.scrollTo(value, 0, 0) : scroll.scroll.instance.scroll.y;
|
|
},
|
|
getBoundingClientRect() {
|
|
return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
|
|
},
|
|
pinType: document.querySelector(".locomotive").style.transform ? "transform" : "fixed"
|
|
});
|
|
|
|
|
|
|
|
|
|
// Mobile Menu Toggle
|
|
const menuIcon = document.querySelector('.navBtnContainer');
|
|
const mobileNav = document.querySelector('.mobileNav');
|
|
|
|
const menuToggle = function () {
|
|
menuIcon.addEventListener(`click`, function() {
|
|
if(this.classList.contains(`active`)) {
|
|
this.classList.remove(`active`);
|
|
mobileNav.classList.remove(`active`);
|
|
} else {
|
|
this.classList.add(`active`);
|
|
mobileNav.classList.add(`active`);
|
|
}
|
|
});
|
|
}
|
|
|
|
menuToggle();
|
|
|
|
|
|
|
|
|
|
// Custom cursor
|
|
const cursorAnimate = function () {
|
|
const cursors = document.querySelector('.cursors')
|
|
const cursor = cursors.querySelector('.cursor')
|
|
const cursorLinks = document.querySelectorAll('a, video, .resumeItem')
|
|
let cursorX = 0
|
|
let cursorY = 0
|
|
let aimX = 0
|
|
let aimY = 0
|
|
let speed = 0.2
|
|
|
|
const cursorEase = function () {
|
|
cursorX += (aimX - cursorX) * speed
|
|
cursorY += (aimY - cursorY) * speed
|
|
|
|
cursor.style.left = cursorX + "px"
|
|
cursor.style.top = cursorY + "px"
|
|
|
|
requestAnimationFrame(cursorEase)
|
|
}
|
|
|
|
cursorEase()
|
|
|
|
document.addEventListener('mousemove', function (event) {
|
|
aimX = event.pageX
|
|
aimY = event.pageY
|
|
})
|
|
|
|
cursorLinks.forEach(cursorLink => {
|
|
cursorLink.addEventListener('mouseover', function () {
|
|
cursor.classList.add(`hover`)
|
|
})
|
|
cursorLink.addEventListener('mouseout', function () {
|
|
cursor.classList.remove(`hover`)
|
|
})
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
// Scroll Trigger Hero Image
|
|
const heroImgInnerAnimate = function () {
|
|
const heroImgInner = document.querySelectorAll('.heroImgInner');
|
|
heroImgInner.forEach(function (heroImgInner){
|
|
gsap.to(heroImgInner, {
|
|
scrollTrigger: {
|
|
trigger: heroImgInner,
|
|
scroller: ".locomotive",
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
scrub: 1,
|
|
},
|
|
y: "-43.75%",
|
|
ease: "none"
|
|
})
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
// Footer Marquee
|
|
const footerMarqueeAnimate = function () {
|
|
const footerMarquee = document.querySelector('.footerMarqueeItem');
|
|
const footerMarqueeTrack = document.querySelector('.footerMarqueeTrack');
|
|
const footerMarqueeItemWidth = footerMarquee.offsetWidth;
|
|
//console.log(footerMarqueeItemWidth);
|
|
const footerMarqueeTL = gsap.timeline({repeat:-1, defaults:{ease:"none"}});
|
|
footerMarqueeTL.to(footerMarqueeTrack,{x:-footerMarqueeItemWidth, duration:20});
|
|
}
|
|
|
|
|
|
|
|
|
|
// Scroll Trigger Marquee
|
|
const marqueeAnimate = function () {
|
|
const marquee = document.querySelectorAll('.marqueeTrack');
|
|
marquee.forEach(function (marquee){
|
|
gsap.to(marquee, {
|
|
scrollTrigger: {
|
|
trigger: marquee,
|
|
scroller: ".locomotive",
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
scrub: 1,
|
|
},
|
|
x: "-33.33%",
|
|
ease: "none"
|
|
})
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
// Scroll Trigger Spin
|
|
const spinTextAnimate = function () {
|
|
const spinText = document.querySelectorAll('.spinText');
|
|
spinText.forEach(function (spinText){
|
|
gsap.to(spinText, {
|
|
scrollTrigger: {
|
|
trigger: spinText,
|
|
scroller: ".locomotive",
|
|
start: "top bottom",
|
|
end: "bottom top",
|
|
scrub: 1,
|
|
},
|
|
rotation:360,
|
|
ease: "none"
|
|
})
|
|
})
|
|
}
|
|
|
|
|
|
|
|
|
|
// Work Experience Dropdown
|
|
const experienceToggle = function () {
|
|
const resumeItems = document.querySelectorAll('.resumeItem');
|
|
resumeItems.forEach(function (item) {
|
|
let jobTitleHeight = item.offsetHeight;
|
|
item.addEventListener('click', function () {
|
|
let jobDescHeight = this.children[4].offsetHeight;
|
|
if(this.classList.contains('active')) {
|
|
this.classList.remove('active')
|
|
this.style.height = jobTitleHeight + "px"
|
|
} else {
|
|
this.classList.add('active')
|
|
this.style.height = jobTitleHeight + jobDescHeight + "px"
|
|
}
|
|
setTimeout(function () { scroll.update(); }, 1000)
|
|
})
|
|
});
|
|
}
|
|
experienceToggle();
|
|
|
|
|
|
|
|
|
|
// Update scroll height after Images Load
|
|
imagesLoaded( 'body', function() {
|
|
scroll.update();
|
|
cursorAnimate();
|
|
footerMarqueeAnimate();
|
|
marqueeAnimate();
|
|
spinTextAnimate();
|
|
ScrollTrigger.matchMedia({
|
|
"(min-width: 960px)": function() {
|
|
heroImgInnerAnimate();
|
|
}
|
|
})
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Barba
|
|
|
|
const transitionPanel1 = document.querySelector('#transitionPanel1');
|
|
const loadPanel = document.querySelector('.loadPanel');
|
|
|
|
barba.hooks.after(() => {
|
|
marqueeAnimate();
|
|
spinTextAnimate();
|
|
experienceToggle();
|
|
cursorAnimate();
|
|
ScrollTrigger.matchMedia({
|
|
"(min-width: 960px)": function() {
|
|
heroImgInnerAnimate();
|
|
}
|
|
})
|
|
scroll.update();
|
|
});
|
|
|
|
|
|
barba.init({
|
|
|
|
transitions: [{
|
|
name: 'default',
|
|
|
|
|
|
|
|
once({ next }) {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
const timeline = gsap.timeline({
|
|
onComplete() {
|
|
deleteSplit();
|
|
scroll.update();
|
|
resolve();
|
|
}
|
|
});
|
|
|
|
const splitHeadline = new SplitText('h1', {type:'words'})
|
|
function deleteSplit() {
|
|
splitHeadline.revert()
|
|
}
|
|
|
|
|
|
timeline
|
|
.set('.load-content', {opacity: 0})
|
|
.set('main', {y: 200, opacity: 0})
|
|
.set('header', {y: -100, opacity: 0})
|
|
.set(splitHeadline.words, {opacity: 0, y: 48})
|
|
.to('.load-content', {duration: 1, opacity: 1}, 0.5)
|
|
.to('.loadPanel', {duration: 1, height: 0, ease: "power4.inOut"}, '+=1')
|
|
.to('.load-content', {duration: 1, opacity: 0}, '-=1')
|
|
.to('header', {duration: 1, y: 0, opacity: 1, ease: "power4.out"}, '-=0.5')
|
|
.to('main', {duration: 1, y: 0, opacity: 1, ease: "power4.out"}, '-=1')
|
|
.to(splitHeadline.words, {duration: 1, y: 0, opacity: 1, ease: "power3.out", stagger: 0.04}, '-=1')
|
|
.set('.loadPanel', {opacity: 0, display:'none'})
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
leave({ current, next, trigger }) {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
const timeline = gsap.timeline({
|
|
onComplete() {
|
|
resolve();
|
|
}
|
|
});
|
|
|
|
transitionPanel1.classList.add(`active`);
|
|
mobileNav.classList.remove(`active`);
|
|
menuIcon.classList.remove(`active`);
|
|
|
|
timeline
|
|
.to('footer', {duration: 0.5, opacity: 0}, 0)
|
|
.to(current.container, {duration: 0.5, opacity: 0}, 0)
|
|
.to(current.container, {display: 'none'})
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
beforeEnter({ current, next, trigger }) {
|
|
|
|
scroll.scrollTo(0, 0);
|
|
|
|
},
|
|
|
|
|
|
|
|
enter({ current, next, trigger }) {
|
|
|
|
imagesLoaded( 'body', function() {
|
|
scroll.update();
|
|
});
|
|
|
|
return new Promise(resolve => {
|
|
|
|
const timeline = gsap.timeline({
|
|
onComplete() {
|
|
transitionPanel1.classList.remove(`active`);
|
|
resolve();
|
|
}
|
|
});
|
|
|
|
timeline
|
|
.set(current.container, {opacity: 0})
|
|
.set(next.container, {opacity: 0})
|
|
|
|
});
|
|
},
|
|
|
|
|
|
|
|
afterEnter({ current, next, trigger }) {
|
|
|
|
return new Promise(resolve => {
|
|
|
|
const timeline = gsap.timeline({
|
|
onComplete() {
|
|
resolve();
|
|
}
|
|
});
|
|
|
|
timeline
|
|
.to(next.container, {duration: 1, opacity: 1}, 0.5)
|
|
.to('footer', {duration: 1, opacity: 1}, 0.5)
|
|
|
|
});
|
|
},
|
|
|
|
|
|
|
|
}],
|
|
|
|
views: [{}],
|
|
|
|
//debug: true
|
|
});
|
|
|
|
*/
|