started scrolling animations at 75%; added lazy loading to images

2026-03-26 10:21:54 +00:00 · 2022-09-19 12:43:19 +02:00
parent ef80fd28d3
commit 906d4a7041
7 changed files with 1927 additions and 39 deletions
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,5 +1,6 @@
 const eleventySass = require("eleventy-sass");
 //const gsap = require('gsap');
+const lazyImagesPlugin = require('eleventy-plugin-lazyimages');

 module.exports = function (eleventyConfig) {

@@ -18,6 +19,11 @@ module.exports = function (eleventyConfig) {
  //plugins
  eleventyConfig.addPlugin(eleventySass);

+  eleventyConfig.addPlugin(lazyImagesPlugin, {
+    imgSelector: 'img:not(.unlazy)', // custom image selector
+    //cacheFile: '', // don't cache results to a file
+  });
+
  return {
    dir: { input: "src", output: "_site", data: "_data" },
  };
--- a/.lazyimages.json
+++ b/.lazyimages.json
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
  "author": "",
  "license": "ISC",
  "devDependencies": {
-    "@11ty/eleventy": "^1.0.1"
+    "@11ty/eleventy": "^1.0.1",
+    "eleventy-plugin-lazyimages": "^2.1.2"
  },
  "dependencies": {
    "@11ty/eleventy-fetch": "^3.0.0",
--- a/src/_includes/components/landing/hero.njk
+++ b/src/_includes/components/landing/hero.njk
@@ -4,7 +4,7 @@
        <img class="img-shadow" src="assets/images/explosion.png" alt="">
    </div>
    <div id="logo">
-        <img src="assets/images/start9_logo.png" alt="">
+        <img class="unlazy" src="assets/images/start9_logo.png" alt="">
        <span>sovereign computing</span>
    </div>
 </section>
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@@ -48,8 +48,8 @@ const defaultActions = "play none none none"; //onEnter, onLeave, onEnterBack, a
 //   sections.forEach((slug) => {
 //     ScrollTrigger.create({
 //       trigger: "#" + slug,
-//       start: "top center",
-//       end: "bottom center",
+//       start: "top 75%",
+//       end: "bottom 75%",
 //       //markers: { startColor: "white", endColor: "white" },
 //       onEnter: () => {
 //         window.location.href = "#" + slug;
@@ -153,8 +153,8 @@ gsap.from("#hero-to-pitch path:first-child", {
  scrollTrigger: {
    trigger: "#hero-to-pitch",
    scrub: true,
-    start: "top center", // "triggerElement page"
-    end: "bottom center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
+    end: "bottom 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -170,7 +170,7 @@ gsap.from("#pitch", {
  //delay: 0.75,
  scrollTrigger: {
    trigger: "#pitch",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -185,7 +185,7 @@ gsap.from("#products .subsection:nth-child(1)", {
  //filter: "blur(10px)",
  scrollTrigger: {
    trigger: "#products",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -198,7 +198,7 @@ gsap.from("#products .subsection:nth-child(2)", {
  //filter: "blur(10px)",
  scrollTrigger: {
    trigger: "#products",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -230,8 +230,8 @@ gsap.from("#products-to-info path:first-child", {
  scrollTrigger: {
    trigger: "#products-to-info path:first-child",
    scrub: true,
-    start: "top center", // "triggerElement page"
-    end: "bottom center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
+    end: "bottom 75%", // "triggerElement page"
  },
 });

@@ -241,8 +241,8 @@ gsap.from("#products-to-info path:nth-child(2)", {
  scrollTrigger: {
    trigger: "#products-to-info path:nth-child(2)",
    scrub: true,
-    start: "top center", // "triggerElement page"
-    end: "bottom center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
+    end: "bottom 75%", // "triggerElement page"
  },
 });

@@ -252,8 +252,8 @@ gsap.from("#products-to-info path:nth-child(3)", {
  scrollTrigger: {
    trigger: "#products-to-info path:nth-child(3)",
    scrub: true,
-    start: "top center", // "triggerElement page"
-    end: "bottom center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
+    end: "bottom 75%", // "triggerElement page"
  },
 });

@@ -271,7 +271,7 @@ gsap.from("#infographics .subsection:nth-child(1)", {
  //filter: "blur(10px)",
  scrollTrigger: {
    trigger: "#infographics .subsection:nth-child(1)",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -287,7 +287,7 @@ gsap.from("#infographics .subsection:nth-child(2)", {
  //filter: "blur(10px)",
  scrollTrigger: {
    trigger: "#infographics .subsection:nth-child(2)",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -384,8 +384,8 @@ gsap.from("#bitcoin-to-be path:first-child", {
  scrollTrigger: {
    trigger: "#bitcoin-to-be",
    scrub: true,
-    start: "top center",
-    end: "bottom center",
+    start: "top 75%",
+    end: "bottom 75%",
  },
 });

@@ -400,7 +400,7 @@ gsap.from("#be-your-own h1", {
  //delay: 0.75,
  scrollTrigger: {
    trigger: "#be-your-own",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -413,7 +413,7 @@ gsap.from("#be-your-own p", {
  //delay: 0.75,
  scrollTrigger: {
    trigger: "#be-your-own h1",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -425,7 +425,7 @@ gsap.from("#be-your-own #ticker", {
  //delay: 0.75,
  scrollTrigger: {
    trigger: "#be-your-own #ticker",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -587,8 +587,8 @@ gsap.from("#be-to-powered path", {
  scrollTrigger: {
    trigger: "#be-to-powered path",
    scrub: true,
-    start: "top center",
-    end: "bottom center",
+    start: "top 75%",
+    end: "bottom 75%",
  },
 });

@@ -603,7 +603,7 @@ gsap.from("#powered-by h1", {
  //delay: 0.75,
  scrollTrigger: {
    trigger: "#powered-by h1",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -616,7 +616,7 @@ gsap.from("#powered-by p", {
  //delay: 0.75,
  scrollTrigger: {
    trigger: "#powered-by h1",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -629,7 +629,7 @@ gsap.from("#powered-by svg", {
  //delay: 0.75,
  scrollTrigger: {
    trigger: "#powered-by svg",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -640,8 +640,8 @@ gsap.from("#powered-to-support path", {
  scrollTrigger: {
    trigger: "#powered-to-support path",
    scrub: true,
-    start: "top center",
-    end: "bottom center",
+    start: "top 75%",
+    end: "bottom 75%",
  },
 });

@@ -659,7 +659,7 @@ gsap.from("#support", {
  //filter: "blur(10px)",
  scrollTrigger: {
    trigger: "#support",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -670,8 +670,8 @@ gsap.from("#support-to-dev path", {
  scrollTrigger: {
    trigger: "#support-to-dev path",
    scrub: true,
-    start: "top center",
-    end: "bottom center",
+    start: "top 75%",
+    end: "bottom 75%",
  },
 });

@@ -689,7 +689,7 @@ gsap.from("#dev", {
  filter: "blur(10px)",
  scrollTrigger: {
    trigger: "#dev",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -705,7 +705,7 @@ gsap.from("#dev .col:nth-child(1)", {
  filter: "blur(10px)",
  scrollTrigger: {
    trigger: "#dev",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -721,7 +721,7 @@ gsap.from("#dev .col:nth-child(2)", {
  filter: "blur(10px)",
  scrollTrigger: {
    trigger: "#dev",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
@@ -732,8 +732,8 @@ gsap.from("#dev-to-contact path", {
  scrollTrigger: {
    trigger: "#dev-to-contact path",
    scrub: true,
-    start: "top center",
-    end: "bottom center",
+    start: "top 75%",
+    end: "bottom 75%",
  },
 });

@@ -751,7 +751,7 @@ gsap.from("#community", {
  filter: "blur(10px)",
  scrollTrigger: {
    trigger: "#community",
-    start: "top center", // "triggerElement page"
+    start: "top 75%", // "triggerElement page"
    toggleActions: defaultActions,
  },
 });
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -79,6 +79,13 @@ body{
    background: #333333;
 }

+img {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+  }
+
 main{
    //transform: translateY(-100vh);
    perspective: 1000px;