fixed ios glitch; removed obsolete code; buy embassy glow

This commit is contained in:
Spencer Flagg
2022-10-18 21:57:28 +02:00
parent e82bc80050
commit df7924c1bc
5 changed files with 58 additions and 52 deletions

View File

@@ -8,7 +8,7 @@ layout: layouts/base.njk
<script defer src="{{ '/assets/js/gsap.min.js' | url }}"></script> <script defer src="{{ '/assets/js/gsap.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script> <script defer src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script> {# <script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script> #}
<script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script> <script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script> <script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
{# <script defer src="{{ '/assets/js/list.min.js' | url }}"></script> #} {# <script defer src="{{ '/assets/js/list.min.js' | url }}"></script> #}

View File

@@ -1,4 +1,4 @@
var bodyRect = document.body.getBoundingClientRect(); //var bodyRect = document.body.getBoundingClientRect();
// TODO: pull these from data js // TODO: pull these from data js
const sections = [ const sections = [
@@ -99,6 +99,8 @@ gsap.from("#pitch h1, #pitch p", {
}, },
}); });
console.log('test');
// gsap.from("#pitch iframe", { // gsap.from("#pitch iframe", {
// duration: 0.5, // duration: 0.5,
// opacity: 0, // opacity: 0,
@@ -147,7 +149,11 @@ const buyTL = gsap
) )
.to( .to(
".product__buy-image", ".product__buy-image",
{ opacity: 0.4, ease: "none", duration: 0.25 }, { //opacity: 0.5,
ease: "none",
duration: 0.25,
filter: "drop-shadow(0 0 2rem rgba(0,0,0,.5)) invert(.9)"
},
0 0
); );

View File

@@ -309,59 +309,59 @@ $pastels: (red, pink) (blue, purple) (green, yellow)
(#a1c4fd, #c2e9fb) (#f6d365, #fda085) (#ffecd2, #fcb69f); (#a1c4fd, #c2e9fb) (#f6d365, #fda085) (#ffecd2, #fcb69f);
$cube-edge: 4em; $cube-edge: 4em;
body { // body {
margin: 0; // margin: 0;
height: 100vh; // height: 100vh;
// perspective: 25em; maybe move from main.css? // // perspective: 25em; maybe move from main.css?
// background-color: linear-gradient(); // // background-color: linear-gradient();
} // }
[class*="cube"] { // [class*="cube"] {
position: absolute; // position: absolute;
} // }
.cube { // .cube {
top: 50%; // top: 50%;
left: 50%; // left: 50%;
transform-style: preserve-3d; // transform-style: preserve-3d;
font-size: 8vmin; // font-size: 8vmin;
animation: ani 8s ease-in-out infinite; // animation: ani 8s ease-in-out infinite;
&__face { // &__face {
margin: -0.5 * $cube-edge; // margin: -0.5 * $cube-edge;
width: $cube-edge; // width: $cube-edge;
height: $cube-edge; // height: $cube-edge;
backface-visibility: hidden; // backface-visibility: hidden;
--i: 0; // --i: 0;
--j: 1; // --j: 1;
transform: rotate3d(var(--i), var(--j), 0, var(--a)) // transform: rotate3d(var(--i), var(--j), 0, var(--a))
translateZ(0.5 * $cube-edge); // translateZ(0.5 * $cube-edge);
// interpolate because Sass apparently has issues with this // // interpolate because Sass apparently has issues with this
background: #{"linear-gradient(var(--ga), var(--gs))"}; // background: #{"linear-gradient(var(--ga), var(--gs))"};
&:nth-child(n + 5) { // &:nth-child(n + 5) {
--i: 1; // --i: 1;
--j: 0; // --j: 0;
} // }
@for $f from 0 to 6 { // @for $f from 0 to 6 {
&:nth-child(#{$f + 1}) { // &:nth-child(#{$f + 1}) {
--a: if($f < 4, $f, pow(-1, $f)) * 90deg; // --a: if($f < 4, $f, pow(-1, $f)) * 90deg;
--ga: random(360) * 1deg; // --ga: random(360) * 1deg;
--gs: nth($pastels, $f + 1); // --gs: nth($pastels, $f + 1);
} // }
} // }
} // }
} // }
@keyframes ani { // @keyframes ani {
from { // from {
transform: rotateY(2turn) rotateX(2turn); // transform: rotateY(2turn) rotateX(2turn);
} // }
to { // to {
transform: rotateY(1turn) rotateX(1turn); // transform: rotateY(1turn) rotateX(1turn);
} // }
} // }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
#hero{ #hero{

View File

@@ -49,7 +49,7 @@ section#products {
} }
img{ img{
transform: scale(1.05); transform: scale(1.05);
opacity: .5; //opacity: .5;
} }
} }
} }

View File

@@ -94,7 +94,7 @@ layout: layouts/base.njk
<script defer src="{{ '/assets/js/gsap.min.js' | url }}"></script> <script defer src="{{ '/assets/js/gsap.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script> <script defer src="{{ '/assets/js/ScrollTrigger.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script> {# <script defer src="{{ '/assets/js/ScrollSmoother.min.js' | url }}"></script> #}
<script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script> <script defer src="{{ '/assets/js/DrawSVGPlugin.min.js' | url }}"></script>
<script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script> <script defer src="{{ '/assets/js/CustomEase.min.js' | url }}"></script>
{# <script defer src="{{ '/assets/js/list.min.js' | url }}"></script> #} {# <script defer src="{{ '/assets/js/list.min.js' | url }}"></script> #}