diff --git a/.cache/eleventy-fetch-ff7bff157a8a33917f958b9cab3878 b/.cache/eleventy-fetch-ff7bff157a8a33917f958b9cab3878
index 7da039f..a3df289 100644
--- a/.cache/eleventy-fetch-ff7bff157a8a33917f958b9cab3878
+++ b/.cache/eleventy-fetch-ff7bff157a8a33917f958b9cab3878
@@ -1 +1 @@
-[{"ff7bff157a8a33917f958b9cab3878":"1"},{"cachedAt":1663441105837,"type":"2"},"json"]
\ No newline at end of file
+[{"ff7bff157a8a33917f958b9cab3878":"1"},{"cachedAt":1663537544811,"type":"2"},"json"]
\ No newline at end of file
diff --git a/src/_data/pseudoservices.json b/src/_data/pseudoservices.json
index 4185174..77a3bdb 100644
--- a/src/_data/pseudoservices.json
+++ b/src/_data/pseudoservices.json
@@ -44,7 +44,7 @@
"url": "https://start9.com/marketplace/165"
},
{
- "name": "KeepPass",
+ "name": "KeePass",
"url": "https://start9.com/marketplace/165"
},
{
diff --git a/src/_includes/components/landing/products.njk b/src/_includes/components/landing/products.njk
index f33b17a..c46f244 100644
--- a/src/_includes/components/landing/products.njk
+++ b/src/_includes/components/landing/products.njk
@@ -1,22 +1,24 @@
\ No newline at end of file
diff --git a/src/_includes/components/svg/buy-lines.svg b/src/_includes/components/svg/buy-lines.svg
new file mode 100644
index 0000000..8709017
--- /dev/null
+++ b/src/_includes/components/svg/buy-lines.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/_includes/components/svg/diy-lines.svg b/src/_includes/components/svg/diy-lines.svg
new file mode 100644
index 0000000..6749e8b
--- /dev/null
+++ b/src/_includes/components/svg/diy-lines.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/js/main.js b/src/assets/js/main.js
index a7e5f70..e7ceceb 100644
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -100,10 +100,10 @@ gsap.from("#hero-image", {
filter: "blur(10px)",
delay: 0.5,
});
-gsap.from("#logo", {
- duration: 0.5,
- y: "-5rem",
- opacity: 0,
+gsap.from("#logo", {
+ duration: 0.5,
+ y: "-5rem",
+ opacity: 0,
delay: 1.25,
//ease: "in-out"
});
@@ -120,7 +120,6 @@ gsap.from("#logo", {
// backdrop-filter: blur(10px);
//background-color: rgba(0,0,0,0.1);
-
//////////////////////////////////////////
// HEADER
@@ -156,7 +155,7 @@ gsap.from("#hero-to-pitch path:first-child", {
scrub: true,
start: "top center", // "triggerElement page"
end: "bottom center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -172,7 +171,7 @@ gsap.from("#pitch", {
scrollTrigger: {
trigger: "#pitch",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -187,7 +186,7 @@ gsap.from("#products .subsection:nth-child(1)", {
scrollTrigger: {
trigger: "#products",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -200,10 +199,31 @@ gsap.from("#products .subsection:nth-child(2)", {
scrollTrigger: {
trigger: "#products",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ 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",
@@ -252,7 +272,7 @@ gsap.from("#infographics .subsection:nth-child(1)", {
scrollTrigger: {
trigger: "#infographics .subsection:nth-child(1)",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -268,7 +288,7 @@ gsap.from("#infographics .subsection:nth-child(2)", {
scrollTrigger: {
trigger: "#infographics .subsection:nth-child(2)",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -284,7 +304,7 @@ gsap.from("#bitcoin .subsection:nth-of-type(1)", {
scrollTrigger: {
trigger: "#bitcoin .subsection:nth-of-type(1)",
start: "top bottom", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -297,7 +317,7 @@ gsap.from("#bitcoin .subsection:nth-of-type(2)", {
scrollTrigger: {
trigger: "#bitcoin .subsection:nth-of-type(2)",
start: "top bottom", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -381,13 +401,12 @@ gsap.from("#be-your-own h1", {
scrollTrigger: {
trigger: "#be-your-own",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
-
gsap.from("#be-your-own p", {
- duration: .5,
+ duration: 0.5,
y: "5rem",
filter: "blur(10px)",
opacity: 0,
@@ -395,7 +414,7 @@ gsap.from("#be-your-own p", {
scrollTrigger: {
trigger: "#be-your-own h1",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -407,7 +426,7 @@ gsap.from("#be-your-own #ticker", {
scrollTrigger: {
trigger: "#be-your-own #ticker",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -467,12 +486,11 @@ 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();
+function pauseThunk() {
+ console.log("asfd");
+ gsap.getById("thunk").kill();
}
-
// CAROUSEL
var slideDelay = 1.5;
@@ -586,13 +604,12 @@ gsap.from("#powered-by h1", {
scrollTrigger: {
trigger: "#powered-by h1",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
-
gsap.from("#powered-by p", {
- duration: .5,
+ duration: 0.5,
//y: "-10rem",
filter: "blur(10px)",
opacity: 0,
@@ -600,7 +617,7 @@ gsap.from("#powered-by p", {
scrollTrigger: {
trigger: "#powered-by h1",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -613,7 +630,7 @@ gsap.from("#powered-by svg", {
scrollTrigger: {
trigger: "#powered-by svg",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -643,7 +660,7 @@ gsap.from("#support", {
scrollTrigger: {
trigger: "#support",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -673,7 +690,7 @@ gsap.from("#dev", {
scrollTrigger: {
trigger: "#dev",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -689,7 +706,7 @@ gsap.from("#dev .col:nth-child(1)", {
scrollTrigger: {
trigger: "#dev",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -699,13 +716,13 @@ gsap.from("#dev .col:nth-child(2)", {
scale: 0.5,
//rotateX: 15,
opacity: 0,
- delay: .75,
+ delay: 0.75,
//outline: "1px solid rgba(255,255,255,1)",
filter: "blur(10px)",
scrollTrigger: {
trigger: "#dev",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
@@ -735,7 +752,7 @@ gsap.from("#community", {
scrollTrigger: {
trigger: "#community",
start: "top center", // "triggerElement page"
- toggleActions: defaultActions
+ toggleActions: defaultActions,
},
});
diff --git a/src/assets/styles/products.scss b/src/assets/styles/products.scss
index 684fe20..bf4a33f 100644
--- a/src/assets/styles/products.scss
+++ b/src/assets/styles/products.scss
@@ -8,13 +8,23 @@ section#products {
.subsection {
transform-style: preserve-3d;
position: relative;
+
+ .heading{
+ transition: var(--t-simple);
+ }
+
+ .product__header {
+ transition: var(--t-simple);
+ }
+
.product__subheader{
font-weight: 500;
color: var(--c-text-primary);
text-transform: uppercase;
+ transition: var(--t-simple);
}
img {
- transition: var(--t-simple);
+ //transition: var(--t-simple);
width: 42vw;
}
a {
@@ -22,18 +32,21 @@ section#products {
flex-direction: column;
position: relative;
padding: 2rem;
- transition: var(--t-simple);
+ //transition: var(--t-simple);
.heading h1 {
line-height: .8;
}
&:hover{
- .heading h1, .heading span {
- color: var(--c-text-accent);
- }
- img{
+ .heading {
transform: scale(1.1);
- opacity: .2;
+ > *{
+ color: var(--c-text-accent);
+ }
}
+ // img{
+ // transform: scale(1.1);
+ // opacity: .2;
+ // }
}
}
&:first-of-type a {
@@ -51,6 +64,10 @@ section#products {
}
background: linear-gradient(45deg, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.05));
+ svg{
+ width: 27rem;
+ position: absolute;
+ }
}
&:last-of-type a {
align-items: flex-start;
@@ -70,6 +87,10 @@ section#products {
}
background: linear-gradient(45deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.25));
+ svg{
+ width: 27rem;
+ position: absolute;
+ }
}
}
&::after{
