├── .gitignore ├── .DS_Store ├── img ├── 1.png ├── 10.png ├── 11.png ├── 12.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png ├── 8.png ├── 9.png └── .DS_Store ├── favicon.ico ├── js ├── .DS_Store ├── utils.js ├── demo10 │ └── index.js ├── demo7 │ └── index.js ├── demo3 │ └── index.js ├── demo2 │ └── index.js ├── demo4 │ └── index.js ├── demo11 │ └── index.js ├── demo5 │ └── index.js ├── demo8 │ └── index.js ├── demo6 │ └── index.js ├── demo15 │ └── index.js ├── demo14 │ └── index.js ├── demo1 │ └── index.js ├── demo12 │ └── index.js ├── demo9 │ └── index.js ├── demo13 │ └── index.js ├── imagesloaded.pkgd.min.js ├── lenis.min.js └── ScrollTrigger.min.js ├── .gitattributes ├── README.md ├── LICENSE ├── index7.html ├── index8.html ├── index9.html ├── index10.html ├── index3.html ├── index2.html ├── index.html ├── index11.html ├── index12.html ├── index13.html ├── index14.html ├── index4.html ├── index5.html ├── index15.html ├── index6.html └── css └── base.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | package-lock.json -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/.DS_Store -------------------------------------------------------------------------------- /img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/1.png -------------------------------------------------------------------------------- /img/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/10.png -------------------------------------------------------------------------------- /img/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/11.png -------------------------------------------------------------------------------- /img/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/12.png -------------------------------------------------------------------------------- /img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/2.png -------------------------------------------------------------------------------- /img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/3.png -------------------------------------------------------------------------------- /img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/4.png -------------------------------------------------------------------------------- /img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/5.png -------------------------------------------------------------------------------- /img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/6.png -------------------------------------------------------------------------------- /img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/7.png -------------------------------------------------------------------------------- /img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/8.png -------------------------------------------------------------------------------- /img/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/9.png -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/favicon.ico -------------------------------------------------------------------------------- /js/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/js/.DS_Store -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/StickySections/HEAD/img/.DS_Store -------------------------------------------------------------------------------- /js/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Preloads images specified by the CSS selector. 3 | * @function 4 | * @param {string} [selector='img'] - CSS selector for target images. 5 | * @returns {Promise} - Resolves when all specified images are loaded. 6 | */ 7 | const preloadImages = (selector = 'img') => { 8 | return new Promise((resolve) => { 9 | // The imagesLoaded library is used to ensure all images (including backgrounds) are fully loaded. 10 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve); 11 | }); 12 | }; 13 | 14 | // Exporting utility functions for use in other modules. 15 | export { 16 | preloadImages 17 | }; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animations for Sticky Sections 2 | 3 | Some ideas of how sticky sections can be animated while exiting the viewport. 4 | 5 | ![Sticky Sections](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2024/01/stickycardnewfeatured.gif?x36933) 6 | 7 | [Article on Codrops](https://tympanus.net/codrops/?p=75532) 8 | 9 | [Demo](http://tympanus.net/Development/StickySections/) 10 | 11 | ## Installation 12 | 13 | Run this demo on a [local server](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server). 14 | 15 | ## Credits 16 | 17 | - Images by [Annas Muslimin](https://www.vecteezy.com/members/annazdsgn) 18 | 19 | ## Misc 20 | 21 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/) 22 | 23 | [Support us](https://www.buymeacoffee.com/codrops) 24 | 25 | ## License 26 | [MIT](LICENSE) 27 | 28 | Made with :blue_heart: by [Codrops](http://www.codrops.com) 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2009 - 2022 [Codrops](https://tympanus.net/codrops) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /js/demo10/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | 38 | gsap.timeline({ 39 | scrollTrigger: { 40 | trigger: el, 41 | start: isLast ? 'top top' : 'bottom top', 42 | end: '+=100%', 43 | scrub: true 44 | } 45 | }) 46 | .to(el, { 47 | ease: 'none', 48 | yPercent: -100 49 | }, 0); 50 | 51 | }); 52 | 53 | }; 54 | 55 | // Initialization function 56 | const init = () => { 57 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 58 | scroll(); // Apply scroll-triggered animations 59 | }; 60 | 61 | preloadImages('.content__img').then(() => { 62 | // Once images are preloaded, remove the 'loading' indicator/class from the body 63 | document.body.classList.remove('loading'); 64 | init(); 65 | }); -------------------------------------------------------------------------------- /js/demo7/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | 38 | gsap.timeline({ 39 | scrollTrigger: { 40 | trigger: el, 41 | start: 'center center', 42 | end: '+=100%', 43 | scrub: true 44 | } 45 | }) 46 | .to(el, { 47 | ease: 'none', 48 | scale: 0.6, 49 | opacity: 0, 50 | yPercent: isLast ? 125 : 0 51 | }, 0); 52 | 53 | }); 54 | 55 | }; 56 | 57 | // Initialization function 58 | const init = () => { 59 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 60 | scroll(); // Apply scroll-triggered animations 61 | }; 62 | 63 | preloadImages('.content__img').then(() => { 64 | // Once images are preloaded, remove the 'loading' indicator/class from the body 65 | document.body.classList.remove('loading'); 66 | init(); 67 | }); -------------------------------------------------------------------------------- /js/demo3/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | 38 | gsap.timeline({ 39 | scrollTrigger: { 40 | trigger: el, 41 | start: 'top top', 42 | end: '+=100%', 43 | scrub: true 44 | } 45 | }) 46 | .set(el, { 47 | transformOrigin: `50% ${ isLast ? 100 : 0 }%` 48 | }) 49 | .to(el, { 50 | ease: 'none', 51 | scale: 0 52 | }, 0) 53 | 54 | }); 55 | 56 | }; 57 | 58 | // Initialization function 59 | const init = () => { 60 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 61 | scroll(); // Apply scroll-triggered animations 62 | }; 63 | 64 | preloadImages('.content__img').then(() => { 65 | // Once images are preloaded, remove the 'loading' indicator/class from the body 66 | document.body.classList.remove('loading'); 67 | init(); 68 | }); -------------------------------------------------------------------------------- /js/demo2/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | 38 | gsap.timeline({ 39 | scrollTrigger: { 40 | trigger: el, 41 | start: 'top top', 42 | end: '+=100%', 43 | scrub: true 44 | } 45 | }) 46 | .to(el, { 47 | ease: 'none', 48 | startAt: {filter: 'brightness(100%)'}, 49 | filter: isLast ? 'none' : 'brightness(50%)', 50 | scale: 0.95, 51 | borderRadius: 40 52 | }, 0); 53 | 54 | }); 55 | 56 | }; 57 | 58 | // Initialization function 59 | const init = () => { 60 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 61 | scroll(); // Apply scroll-triggered animations 62 | }; 63 | 64 | preloadImages('.content__img').then(() => { 65 | // Once images are preloaded, remove the 'loading' indicator/class from the body 66 | document.body.classList.remove('loading'); 67 | init(); 68 | }); -------------------------------------------------------------------------------- /js/demo4/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | 38 | gsap.timeline({ 39 | scrollTrigger: { 40 | trigger: el, 41 | start: 'top top', 42 | end: '+=100%', 43 | scrub: true 44 | } 45 | }) 46 | .set(el, { 47 | transformOrigin: `${ position%2===0 ? 0 : 100 }% ${ isLast ? 100 : 0 }%` 48 | }) 49 | .to(el, { 50 | ease: 'none', 51 | scale: 0, 52 | borderRadius: 200 53 | }, 0); 54 | 55 | }); 56 | 57 | }; 58 | 59 | // Initialization function 60 | const init = () => { 61 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 62 | scroll(); // Apply scroll-triggered animations 63 | }; 64 | 65 | preloadImages('.content__img').then(() => { 66 | // Once images are preloaded, remove the 'loading' indicator/class from the body 67 | document.body.classList.remove('loading'); 68 | init(); 69 | }); -------------------------------------------------------------------------------- /js/demo11/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | 38 | gsap.timeline({ 39 | scrollTrigger: { 40 | trigger: el, 41 | start: 'top top', 42 | end: '+=100%', 43 | scrub: true 44 | } 45 | }) 46 | .set(el, { 47 | transformOrigin: '100% 0%' 48 | }) 49 | .to(el, { 50 | ease: 'none', 51 | opacity: 0, 52 | borderRadius: 20, 53 | yPercent: isLast ? 105 : 5, 54 | scale: 0.75, 55 | rotation: -20 56 | }, 0); 57 | 58 | }); 59 | 60 | }; 61 | 62 | // Initialization function 63 | const init = () => { 64 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 65 | scroll(); // Apply scroll-triggered animations 66 | }; 67 | 68 | preloadImages('.content__img').then(() => { 69 | // Once images are preloaded, remove the 'loading' indicator/class from the body 70 | document.body.classList.remove('loading'); 71 | init(); 72 | }); -------------------------------------------------------------------------------- /js/demo5/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | 38 | gsap.timeline({ 39 | scrollTrigger: { 40 | trigger: el, 41 | start: 'top top', 42 | end: '+=100%', 43 | scrub: true 44 | } 45 | }) 46 | .set(el, { 47 | transformOrigin: `${ position%2 === 0 ? 2 : 98 }% ${ isLast ? 0 : 2 }%` 48 | }) 49 | .to(el, { 50 | ease: isLast ? 'none' : 'none', 51 | scale: 0, 52 | yPercent: isLast ? 100 : 0, 53 | rotation: position%2 === 0 ? 10 : -10 54 | }, 0); 55 | 56 | }); 57 | 58 | }; 59 | 60 | // Initialization function 61 | const init = () => { 62 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 63 | scroll(); // Apply scroll-triggered animations 64 | }; 65 | 66 | preloadImages('.content__img').then(() => { 67 | // Once images are preloaded, remove the 'loading' indicator/class from the body 68 | document.body.classList.remove('loading'); 69 | init(); 70 | }); -------------------------------------------------------------------------------- /js/demo8/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | 10 | // Initializes Lenis for smooth scrolling with specific properties 11 | const initSmoothScrolling = () => { 12 | // Instantiate the Lenis object with specified properties 13 | lenis = new Lenis({ 14 | lerp: 0.2, // Lower values create a smoother scroll effect 15 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 16 | }); 17 | 18 | // Update ScrollTrigger each time the user scrolls 19 | lenis.on('scroll', () => ScrollTrigger.update()); 20 | 21 | // Define a function to run at each animation frame 22 | const scrollFn = (time) => { 23 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 24 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 25 | }; 26 | // Start the animation frame loop 27 | requestAnimationFrame(scrollFn); 28 | }; 29 | 30 | // Function to handle scroll-triggered animations 31 | const scroll = () => { 32 | 33 | contentElements.forEach(el => { 34 | 35 | gsap.timeline({ 36 | scrollTrigger: { 37 | trigger: el, 38 | start: 'center center', 39 | end: 'max', 40 | scrub: true 41 | } 42 | }) 43 | .to(el, { 44 | ease: 'none', 45 | startAt: {filter: 'blur(0px)'}, 46 | filter: 'blur(3px)', 47 | scrollTrigger: { 48 | trigger: el, 49 | start: 'center center', 50 | end: '+=100%', 51 | scrub: true 52 | } 53 | }, 0) 54 | .to(el, { 55 | ease: 'none', 56 | scale: 0.4, 57 | yPercent: -50 58 | }, 0) 59 | 60 | }); 61 | }; 62 | 63 | // Initialization function 64 | const init = () => { 65 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 66 | scroll(); // Apply scroll-triggered animations 67 | }; 68 | 69 | preloadImages('.content__img').then(() => { 70 | // Once images are preloaded, remove the 'loading' indicator/class from the body 71 | document.body.classList.remove('loading'); 72 | init(); 73 | }); -------------------------------------------------------------------------------- /js/demo6/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | const inner = el.querySelector('.content__inner'); 38 | 39 | gsap.timeline({ 40 | scrollTrigger: { 41 | trigger: el, 42 | start: 'top top', 43 | end: '+=200%', 44 | scrub: true 45 | } 46 | }) 47 | .set(inner, { 48 | transformOrigin: '50% 0%' 49 | }) 50 | .to(inner, { 51 | ease: 'power1', 52 | startAt: {filter: 'brightness(100%)'}, 53 | filter: 'brightness(60%)', 54 | scale: .9, 55 | rotationX: -90, 56 | yPercent: isLast ? 100 : 0 57 | }, 0); 58 | 59 | }); 60 | 61 | }; 62 | 63 | // Initialization function 64 | const init = () => { 65 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 66 | scroll(); // Apply scroll-triggered animations 67 | }; 68 | 69 | preloadImages('.content__img').then(() => { 70 | // Once images are preloaded, remove the 'loading' indicator/class from the body 71 | document.body.classList.remove('loading'); 72 | init(); 73 | }); -------------------------------------------------------------------------------- /js/demo15/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | 38 | gsap.timeline({ 39 | scrollTrigger: { 40 | trigger: el, 41 | start: 'top top', 42 | end: '+=100%', 43 | scrub: true 44 | } 45 | }) 46 | .fromTo(el.querySelector('.content__img'), { 47 | yPercent: 10, 48 | rotation: 20, 49 | }, { 50 | ease: 'power1', 51 | yPercent: -60, 52 | rotation: -20, 53 | scrollTrigger: { 54 | trigger: el, 55 | start: 'top bottom', 56 | end: 'max', 57 | scrub: true 58 | } 59 | }, 0); 60 | 61 | 62 | }); 63 | 64 | }; 65 | 66 | // Initialization function 67 | const init = () => { 68 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 69 | scroll(); // Apply scroll-triggered animations 70 | }; 71 | 72 | preloadImages('.content__img').then(() => { 73 | // Once images are preloaded, remove the 'loading' indicator/class from the body 74 | document.body.classList.remove('loading'); 75 | init(); 76 | }); -------------------------------------------------------------------------------- /js/demo14/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | 38 | gsap.timeline({ 39 | scrollTrigger: { 40 | trigger: el, 41 | start: 'top top', 42 | end: '+=100%', 43 | scrub: true 44 | } 45 | }) 46 | .set(el, { 47 | transformOrigin: `50% ${ isLast ? 100 : 0 }%` 48 | }) 49 | .to(el, { 50 | ease: 'none', 51 | scaleY: 0 52 | }, 0) 53 | // Animate all the content inner elements 54 | .to(el.querySelectorAll('.content__title, .content__text, .content__img'), { 55 | ease: 'back.in(0.1)', 56 | scale: 1.7, 57 | opacity: 0 58 | }, 0); 59 | 60 | }); 61 | 62 | }; 63 | 64 | // Initialization function 65 | const init = () => { 66 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 67 | scroll(); // Apply scroll-triggered animations 68 | }; 69 | 70 | preloadImages('.content__img').then(() => { 71 | // Once images are preloaded, remove the 'loading' indicator/class from the body 72 | document.body.classList.remove('loading'); 73 | init(); 74 | }); -------------------------------------------------------------------------------- /js/demo1/index.js: -------------------------------------------------------------------------------- 1 | // Importing utility function for preloading images 2 | import { preloadImages } from '../utils.js'; 3 | 4 | // Variable to store the Lenis smooth scrolling object 5 | let lenis; 6 | 7 | // Selecting DOM elements 8 | 9 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 10 | const totalContentElements = contentElements.length; 11 | 12 | // Initializes Lenis for smooth scrolling with specific properties 13 | const initSmoothScrolling = () => { 14 | // Instantiate the Lenis object with specified properties 15 | lenis = new Lenis({ 16 | lerp: 0.2, // Lower values create a smoother scroll effect 17 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 18 | }); 19 | 20 | // Update ScrollTrigger each time the user scrolls 21 | lenis.on('scroll', () => ScrollTrigger.update()); 22 | 23 | // Define a function to run at each animation frame 24 | const scrollFn = (time) => { 25 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 26 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 27 | }; 28 | // Start the animation frame loop 29 | requestAnimationFrame(scrollFn); 30 | }; 31 | 32 | // Function to handle scroll-triggered animations 33 | const scroll = () => { 34 | 35 | contentElements.forEach((el, position) => { 36 | 37 | const isLast = position === totalContentElements-1; 38 | 39 | gsap.timeline({ 40 | scrollTrigger: { 41 | trigger: el, 42 | start: 'top top', 43 | end: '+=100%', 44 | scrub: true 45 | } 46 | }) 47 | .to(el, { 48 | ease: 'none', 49 | startAt: {filter: 'brightness(100%) contrast(100%)'}, 50 | filter: isLast ? 'none' : 'brightness(60%) contrast(135%)', 51 | yPercent: isLast ? 0 : -15 52 | }, 0) 53 | // Animate the content inner image 54 | .to(el.querySelector('.content__img'), { 55 | ease: 'power1.in', 56 | yPercent: -40, 57 | rotation: -20 58 | }, 0); 59 | 60 | }); 61 | 62 | }; 63 | 64 | // Initialization function 65 | const init = () => { 66 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 67 | scroll(); // Apply scroll-triggered animations 68 | }; 69 | 70 | preloadImages('.content__img').then(() => { 71 | // Once images are preloaded, remove the 'loading' indicator/class from the body 72 | document.body.classList.remove('loading'); 73 | init(); 74 | }); -------------------------------------------------------------------------------- /js/demo12/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | gsap.timeline({ 37 | scrollTrigger: { 38 | trigger: el, 39 | start: 'top top', 40 | end: '+=200%', 41 | scrub: true 42 | } 43 | }) 44 | .set(el, { 45 | transformOrigin: `${ position%2 === 0 ? 100 : 0 }% 0%` 46 | }) 47 | .to(el, { 48 | ease: 'none', 49 | startAt: {filter: 'brightness(100%) contrast(100%)'}, 50 | yPercent: -100, 51 | scale: 0.9, 52 | rotation: position%2 === 0 ? -2 : 2, 53 | filter: 'brightness(50%) contrast(300%)' 54 | }, 0) 55 | // Animate the content inner image 56 | .to(el.querySelectorAll('.content__img'), { 57 | ease: 'power1.in', 58 | xPercent: -40, 59 | rotation: position%2 === 0 ? -20 : 20 60 | }, 0); 61 | 62 | }); 63 | 64 | }; 65 | 66 | // Initialization function 67 | const init = () => { 68 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 69 | scroll(); // Apply scroll-triggered animations 70 | }; 71 | 72 | preloadImages('.content__img').then(() => { 73 | // Once images are preloaded, remove the 'loading' indicator/class from the body 74 | document.body.classList.remove('loading'); 75 | init(); 76 | }); -------------------------------------------------------------------------------- /js/demo9/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | const isPreLast = position === totalContentElements-2; 38 | 39 | gsap.timeline({ 40 | scrollTrigger: { 41 | trigger: el, 42 | start: () => { 43 | if ( isLast ) { 44 | return 'top top'; 45 | } 46 | else if ( isPreLast ) { 47 | return 'bottom top'; 48 | } 49 | else { 50 | return 'bottom+=100% top'; 51 | } 52 | }, 53 | end: '+=100%', 54 | scrub: true 55 | } 56 | }) 57 | .to(el, { 58 | ease: 'none', 59 | yPercent: -100 60 | }, 0) 61 | // Animate the content inner image 62 | .fromTo(el.querySelector('.content__img'), { 63 | yPercent: 20, 64 | rotation: 40, 65 | scale: 0.8, 66 | filter: 'contrast(400%)' 67 | }, { 68 | ease: 'none', 69 | yPercent: -100, 70 | rotation: 0, 71 | scale: 1, 72 | filter: 'contrast(100%)', 73 | scrollTrigger: { 74 | trigger: el, 75 | start: 'top bottom', 76 | end: 'max', 77 | scrub: true 78 | } 79 | }, 0); 80 | 81 | }); 82 | 83 | }; 84 | 85 | // Initialization function 86 | const init = () => { 87 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 88 | scroll(); // Apply scroll-triggered animations 89 | }; 90 | 91 | preloadImages('.content__img').then(() => { 92 | // Once images are preloaded, remove the 'loading' indicator/class from the body 93 | document.body.classList.remove('loading'); 94 | init(); 95 | }); -------------------------------------------------------------------------------- /js/demo13/index.js: -------------------------------------------------------------------------------- 1 | import { preloadImages } from '../utils.js'; 2 | 3 | // Variable to store the Lenis smooth scrolling object 4 | let lenis; 5 | 6 | // Selecting DOM elements 7 | 8 | const contentElements = [...document.querySelectorAll('.content--sticky')]; 9 | const totalContentElements = contentElements.length; 10 | 11 | // Initializes Lenis for smooth scrolling with specific properties 12 | const initSmoothScrolling = () => { 13 | // Instantiate the Lenis object with specified properties 14 | lenis = new Lenis({ 15 | lerp: 0.2, // Lower values create a smoother scroll effect 16 | smoothWheel: true // Enables smooth scrolling for mouse wheel events 17 | }); 18 | 19 | // Update ScrollTrigger each time the user scrolls 20 | lenis.on('scroll', () => ScrollTrigger.update()); 21 | 22 | // Define a function to run at each animation frame 23 | const scrollFn = (time) => { 24 | lenis.raf(time); // Run Lenis' requestAnimationFrame method 25 | requestAnimationFrame(scrollFn); // Recursively call scrollFn on each frame 26 | }; 27 | // Start the animation frame loop 28 | requestAnimationFrame(scrollFn); 29 | }; 30 | 31 | // Function to handle scroll-triggered animations 32 | const scroll = () => { 33 | 34 | contentElements.forEach((el, position) => { 35 | 36 | const isLast = position === totalContentElements-1; 37 | 38 | gsap.timeline({ 39 | defaults: {ease: 'none'}, 40 | scrollTrigger: { 41 | trigger: el, 42 | start: 'top top', 43 | end: isLast ? '+=100%' : '+=200%', 44 | scrub: true 45 | } 46 | }) 47 | .set(el, { 48 | transformOrigin: `${ position%2 === 0 ? 100 : 0 }% ${ isLast ? 0 : 100 }%` 49 | }) 50 | .to(el, { 51 | startAt: {filter: 'brightness(100%)'}, 52 | xPercent: position%2 === 0 ? -150 : 150, 53 | yPercent: isLast ? 100 : 0, 54 | rotation: position%2 === 0 ? -20 : 20, 55 | scale: 0.8, 56 | filter: 'brightness(0%)' 57 | }, 0) 58 | // Animate all the content inner elements 59 | .to(el.querySelector('.content__title'), { 60 | scale: 0.5, 61 | yPercent: -400, 62 | }, 0) 63 | .to(el.querySelector('.content__text'), { 64 | yPercent: 100 65 | }, 0) 66 | .to(el.querySelector('.content__img'), { 67 | //ease: 'power1', 68 | scale: 0.2 69 | }, 0) 70 | 71 | 72 | }); 73 | 74 | }; 75 | 76 | // Initialization function 77 | const init = () => { 78 | initSmoothScrolling(); // Initialize Lenis for smooth scrolling 79 | scroll(); // Apply scroll-triggered animations 80 | }; 81 | 82 | preloadImages('.content__img').then(() => { 83 | // Once images are preloaded, remove the 'loading' indicator/class from the body 84 | document.body.classList.remove('loading'); 85 | init(); 86 | }); -------------------------------------------------------------------------------- /index7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 7 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Narrative

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity.

52 |
53 |
54 | 55 |

The Dogma

56 |

Enshrining the principles of conformity and reinforcing the status quo.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments.

67 |
68 |
69 | 70 |

The Narrative

71 |

The collective story sculpted by the architects.

72 |
73 |
74 | 75 |

The Opulence

76 |

The cognitive elite's wealth in the algorithmic society.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 8 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Shadow

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity.

52 |
53 |
54 | 55 |

The Dogma

56 |

Enshrining the principles of conformity and reinforcing the status quo.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments.

67 |
68 |
69 | 70 |

The Narrative

71 |

The collective story sculpted by the architects.

72 |
73 |
74 | 75 |

The Opulence

76 |

The cognitive elite's wealth in the algorithmic society.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 9 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Escape

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity.

52 |
53 |
54 | 55 |

The Dogma

56 |

Enshrining the principles of conformity and reinforcing the status quo.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments.

67 |
68 |
69 | 70 |

The Narrative

71 |

The collective story sculpted by the architects.

72 |
73 |
74 | 75 |

The Opulence

76 |

The cognitive elite's wealth in the algorithmic society.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 10 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Simulation

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity.

52 |
53 |
54 | 55 |

The Dogma

56 |

Enshrining the principles of conformity and reinforcing the status quo.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments.

67 |
68 |
69 | 70 |

The Narrative

71 |

The collective story sculpted by the architects.

72 |
73 |
74 | 75 |

The Opulence

76 |

The cognitive elite's wealth in the algorithmic society.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /js/imagesloaded.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v5.0.0 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | !function(t,e){"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,(function(){function t(){}let e=t.prototype;return e.on=function(t,e){if(!t||!e)return this;let i=this._events=this._events||{},s=i[t]=i[t]||[];return s.includes(e)||s.push(e),this},e.once=function(t,e){if(!t||!e)return this;this.on(t,e);let i=this._onceEvents=this._onceEvents||{};return(i[t]=i[t]||{})[e]=!0,this},e.off=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;let s=i.indexOf(e);return-1!=s&&i.splice(s,1),this},e.emitEvent=function(t,e){let i=this._events&&this._events[t];if(!i||!i.length)return this;i=i.slice(0),e=e||[];let s=this._onceEvents&&this._onceEvents[t];for(let n of i){s&&s[n]&&(this.off(t,n),delete s[n]),n.apply(this,e)}return this},e.allOff=function(){return delete this._events,delete this._onceEvents,this},t})), 7 | /*! 8 | * imagesLoaded v5.0.0 9 | * JavaScript is all like "You images are done yet or what?" 10 | * MIT License 11 | */ 12 | function(t,e){"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}("undefined"!=typeof window?window:this,(function(t,e){let i=t.jQuery,s=t.console;function n(t,e,o){if(!(this instanceof n))return new n(t,e,o);let r=t;var h;("string"==typeof t&&(r=document.querySelectorAll(t)),r)?(this.elements=(h=r,Array.isArray(h)?h:"object"==typeof h&&"number"==typeof h.length?[...h]:[h]),this.options={},"function"==typeof e?o=e:Object.assign(this.options,e),o&&this.on("always",o),this.getImages(),i&&(this.jqDeferred=new i.Deferred),setTimeout(this.check.bind(this))):s.error(`Bad element for imagesLoaded ${r||t}`)}n.prototype=Object.create(e.prototype),n.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)};const o=[1,9,11];n.prototype.addElementImages=function(t){"IMG"===t.nodeName&&this.addImage(t),!0===this.options.background&&this.addElementBackgroundImages(t);let{nodeType:e}=t;if(!e||!o.includes(e))return;let i=t.querySelectorAll("img");for(let t of i)this.addImage(t);if("string"==typeof this.options.background){let e=t.querySelectorAll(this.options.background);for(let t of e)this.addElementBackgroundImages(t)}};const r=/url\((['"])?(.*?)\1\)/gi;function h(t){this.img=t}function d(t,e){this.url=t,this.element=e,this.img=new Image}return n.prototype.addElementBackgroundImages=function(t){let e=getComputedStyle(t);if(!e)return;let i=r.exec(e.backgroundImage);for(;null!==i;){let s=i&&i[2];s&&this.addBackground(s,t),i=r.exec(e.backgroundImage)}},n.prototype.addImage=function(t){let e=new h(t);this.images.push(e)},n.prototype.addBackground=function(t,e){let i=new d(t,e);this.images.push(i)},n.prototype.check=function(){if(this.progressedCount=0,this.hasAnyBroken=!1,!this.images.length)return void this.complete();let t=(t,e,i)=>{setTimeout((()=>{this.progress(t,e,i)}))};this.images.forEach((function(e){e.once("progress",t),e.check()}))},n.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount===this.images.length&&this.complete(),this.options.debug&&s&&s.log(`progress: ${i}`,t,e)},n.prototype.complete=function(){let t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){let t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},h.prototype=Object.create(e.prototype),h.prototype.check=function(){this.getIsImageComplete()?this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.img.crossOrigin&&(this.proxyImage.crossOrigin=this.img.crossOrigin),this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.proxyImage.src=this.img.currentSrc||this.img.src)},h.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},h.prototype.confirm=function(t,e){this.isLoaded=t;let{parentNode:i}=this.img,s="PICTURE"===i.nodeName?i:this.img;this.emitEvent("progress",[this,s,e])},h.prototype.handleEvent=function(t){let e="on"+t.type;this[e]&&this[e](t)},h.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},h.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},h.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},d.prototype=Object.create(h.prototype),d.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url,this.getIsImageComplete()&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},d.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},d.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.element,e])},n.makeJQueryPlugin=function(e){(e=e||t.jQuery)&&(i=e,i.fn.imagesLoaded=function(t,e){return new n(this,t,e).jqDeferred.promise(i(this))})},n.makeJQueryPlugin(),n})); -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 3 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Algorithm

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

Society, now dictated by algorithmic Dogmas, witnessed the polarization of the cognitive landscape.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity, and its decision-making processes are inscrutable to the general populace.

52 |
53 |
54 | 55 |

The Dogma

56 |

The digital gospel etched into the very code of the algorithmic society, served as the bedrock of the cognitive regime.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows, skillfully shaping societal norms through the complex interplay of algorithms and Dogmas.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments, is a haunting landscape filled with the echoes of untold stories and uncharted thoughts.

67 |
68 |
69 | 70 |

The Narrative

71 |

"The Narrative" unfolds as the omnipresent thread weaving through the fabric of the algorithmic society.

72 |
73 |
74 | 75 |

The Opulence

76 |

"The Opulence" epitomizes the cognitive elite's wealth in the algorithmic society, where opulent thoughts and experiences shape the societal narrative.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 2 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Denizens

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

Their cognitive emissions, deemed inconsequential, formed a discarded wasteland of uncharted thoughts and untold narratives.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity, and its decision-making processes are inscrutable to the general populace.

52 |
53 |
54 | 55 |

The Dogma

56 |

The digital gospel etched into the very code of the algorithmic society, served as the bedrock of the cognitive regime.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows, skillfully shaping societal norms through the complex interplay of algorithms and Dogmas.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments, is a haunting landscape filled with the echoes of untold stories and uncharted thoughts.

67 |
68 |
69 | 70 |

The Narrative

71 |

"The Narrative" unfolds as the omnipresent thread weaving through the fabric of the algorithmic society.

72 |
73 |
74 | 75 |

The Opulence

76 |

"The Opulence" epitomizes the cognitive elite's wealth in the algorithmic society, where opulent thoughts and experiences shape the societal narrative.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 1 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Denizens

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity, and its decision-making processes are inscrutable to the general populace.

52 |
53 |
54 | 55 |

The Dogma

56 |

The digital gospel etched into the very code of the algorithmic society, served as the bedrock of the cognitive regime.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows, skillfully shaping societal norms through the complex interplay of algorithms and Dogmas.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments, is a haunting landscape filled with the echoes of untold stories and uncharted thoughts.

67 |
68 |
69 | 70 |

The Narrative

71 |

"The Narrative" unfolds as the omnipresent thread weaving through the fabric of the algorithmic society.

72 |
73 |
74 | 75 |

The Opulence

76 |

"The Opulence" epitomizes the cognitive elite's wealth in the algorithmic society, where opulent thoughts and experiences shape the societal narrative.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 10 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Opulence

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity, and its decision-making processes are inscrutable to the general populace.

52 |
53 |
54 | 55 |

The Dogma

56 |

The digital gospel etched into the very code of the algorithmic society, served as the bedrock of the cognitive regime.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows, skillfully shaping societal norms through the complex interplay of algorithms and Dogmas.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments, is a haunting landscape filled with the echoes of untold stories and uncharted thoughts.

67 |
68 |
69 | 70 |

The Narrative

71 |

"The Narrative" unfolds as the omnipresent thread weaving through the fabric of the algorithmic society.

72 |
73 |
74 | 75 |

The Opulence

76 |

"The Opulence" epitomizes the cognitive elite's wealth in the algorithmic society, where opulent thoughts and experiences shape the societal narrative.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index12.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 12 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Solace

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity, and its decision-making processes are inscrutable to the general populace.

52 |
53 |
54 | 55 |

The Dogma

56 |

The digital gospel etched into the very code of the algorithmic society, served as the bedrock of the cognitive regime.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows, skillfully shaping societal norms through the complex interplay of algorithms and Dogmas.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments, is a haunting landscape filled with the echoes of untold stories and uncharted thoughts.

67 |
68 |
69 | 70 |

The Narrative

71 |

"The Narrative" unfolds as the omnipresent thread weaving through the fabric of the algorithmic society.

72 |
73 |
74 | 75 |

The Opulence

76 |

"The Opulence" epitomizes the cognitive elite's wealth in the algorithmic society, where opulent thoughts and experiences shape the societal narrative.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index13.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 13 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Silence

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity, and its decision-making processes are inscrutable to the general populace.

52 |
53 |
54 | 55 |

The Dogma

56 |

The digital gospel etched into the very code of the algorithmic society, served as the bedrock of the cognitive regime.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows, skillfully shaping societal norms through the complex interplay of algorithms and Dogmas.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments, is a haunting landscape filled with the echoes of untold stories and uncharted thoughts.

67 |
68 |
69 | 70 |

The Narrative

71 |

"The Narrative" unfolds as the omnipresent thread weaving through the fabric of the algorithmic society.

72 |
73 |
74 | 75 |

The Opulence

76 |

"The Opulence" epitomizes the cognitive elite's wealth in the algorithmic society, where opulent thoughts and experiences shape the societal narrative.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index14.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 14 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Echoes

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity, and its decision-making processes are inscrutable to the general populace.

52 |
53 |
54 | 55 |

The Dogma

56 |

The digital gospel etched into the very code of the algorithmic society, served as the bedrock of the cognitive regime.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows, skillfully shaping societal norms through the complex interplay of algorithms and Dogmas.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments, is a haunting landscape filled with the echoes of untold stories and uncharted thoughts.

67 |
68 |
69 | 70 |

The Narrative

71 |

"The Narrative" unfolds as the omnipresent thread weaving through the fabric of the algorithmic society.

72 |
73 |
74 | 75 |

The Opulence

76 |

"The Opulence" epitomizes the cognitive elite's wealth in the algorithmic society, where opulent thoughts and experiences shape the societal narrative.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 4 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Architects

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity, and its decision-making processes are inscrutable to the general populace.

52 |
53 |
54 | 55 |

The Dogma

56 |

The digital gospel etched into the very code of the algorithmic society, served as the bedrock of the cognitive regime.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows, skillfully shaping societal norms through the complex interplay of algorithms and Dogmas.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments, is a haunting landscape filled with the echoes of untold stories and uncharted thoughts.

67 |
68 |
69 | 70 |

The Narrative

71 |

"The Narrative" unfolds as the omnipresent thread weaving through the fabric of the algorithmic society.

72 |
73 |
74 | 75 |

The Opulence

76 |

"The Opulence" epitomizes the cognitive elite's wealth in the algorithmic society, where opulent thoughts and experiences shape the societal narrative.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 5 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Periphery

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity, and its decision-making processes are inscrutable to the general populace.

52 |
53 |
54 | 55 |

The Dogma

56 |

The digital gospel etched into the very code of the algorithmic society, served as the bedrock of the cognitive regime.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows, skillfully shaping societal norms through the complex interplay of algorithms and Dogmas.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments, is a haunting landscape filled with the echoes of untold stories and uncharted thoughts.

67 |
68 |
69 | 70 |

The Narrative

71 |

"The Narrative" unfolds as the omnipresent thread weaving through the fabric of the algorithmic society.

72 |
73 |
74 | 75 |

The Opulence

76 |

"The Opulence" epitomizes the cognitive elite's wealth in the algorithmic society, where opulent thoughts and experiences shape the societal narrative.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index15.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 15 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Fabric

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 | 50 |

The Algorithm

51 |

The algorithm's workings are shrouded in complexity, and its decision-making processes are inscrutable to the general populace.

52 |
53 |
54 | 55 |

The Dogma

56 |

The digital gospel etched into the very code of the algorithmic society, served as the bedrock of the cognitive regime.

57 |
58 |
59 | 60 |

The Architects

61 |

The elusive entities, lacking human form, operate in the shadows, skillfully shaping societal norms through the complex interplay of algorithms and Dogmas.

62 |
63 |
64 | 65 |

The Wasteland

66 |

This overlooked realm, a consequence of algorithmic judgments, is a haunting landscape filled with the echoes of untold stories and uncharted thoughts.

67 |
68 |
69 | 70 |

The Narrative

71 |

"The Narrative" unfolds as the omnipresent thread weaving through the fabric of the algorithmic society.

72 |
73 |
74 | 75 |

The Opulence

76 |

"The Opulence" epitomizes the cognitive elite's wealth in the algorithmic society, where opulent thoughts and experiences shape the societal narrative.

77 |
78 |
79 |
80 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

81 | 82 |
83 | 87 |
88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /index6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sticky Sections | Demo 6 | Codrops 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

Sticky Sections

19 | Article 20 | Previous demo 21 | Subscribe to our frontend news 22 | 39 |
40 |

The Emissions

41 |

An exploration of the Synthetic Era.

42 |
43 |
44 |
45 |

As data conglomerates reveled in the opulence of cognitive wealth, a silent underclass manifested, condemned to the digital periphery.

46 |
47 |
48 |
49 |
50 | 51 |

The Algorithm

52 |

The algorithm's workings are shrouded in complexity, and its decision-making processes are inscrutable to the general populace.

53 |
54 |
55 |
56 |
57 | 58 |

The Dogma

59 |

The digital gospel etched into the very code of the algorithmic society, served as the bedrock of the cognitive regime.

60 |
61 |
62 |
63 |
64 | 65 |

The Architects

66 |

The elusive entities, lacking human form, operate in the shadows, skillfully shaping societal norms through the complex interplay of algorithms and Dogmas.

67 |
68 |
69 |
70 |
71 | 72 |

The Wasteland

73 |

This overlooked realm, a consequence of algorithmic judgments, is a haunting landscape filled with the echoes of untold stories and uncharted thoughts.

74 |
75 |
76 |
77 |
78 | 79 |

The Narrative

80 |

"The Narrative" unfolds as the omnipresent thread weaving through the fabric of the algorithmic society.

81 |
82 |
83 |
84 |
85 | 86 |

The Opulence

87 |

"The Opulence" epitomizes the cognitive elite's wealth in the algorithmic society, where opulent thoughts and experiences shape the societal narrative.

88 |
89 |
90 |
91 |
92 |

Lost in perpetual dependency, inhabitants of the Synthetic Era found solace in cryptic simulations, where pain ebbed and cognitive loads momentarily lightened.

93 | 94 |
95 | 99 |
100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | font-size: 16px; 9 | --page-padding: 1.5rem; 10 | --color-text: #fff; 11 | --color-bg: #12100e; 12 | --color-link: rgba(255,255,255,0.6); 13 | --color-link-hover: #fff; 14 | --color-bg-1: #2f251e; 15 | --color-bg-2: #43392f; 16 | --color-bg-3: var(--color-bg-1); 17 | --color-bg-4: var(--color-bg-2); 18 | --color-bg-5: var(--color-bg-1); 19 | --color-bg-6: var(--color-bg-2); 20 | } 21 | 22 | body { 23 | margin: 0; 24 | color: var(--color-text); 25 | background-color: var(--color-bg); 26 | font-family: "area-variable", sans-serif; 27 | font-variation-settings: "slnt" 0, "wdth" 150, "wght" 500, "INKT" 0; 28 | -webkit-font-smoothing: antialiased; 29 | -moz-osx-font-smoothing: grayscale; 30 | width: 100%; 31 | overflow-x: hidden; 32 | } 33 | 34 | .demo-2, 35 | .demo-4, 36 | .demo-6, 37 | .demo-8, 38 | .demo-10, 39 | .demo-12, 40 | .demo-14 { 41 | --color-text: #000; 42 | --color-bg: #e1e1e1; 43 | --color-link: rgba(0,0,0,0.6); 44 | --color-link-hover: #000; 45 | --color-bg-1: #9d9d9d; 46 | --color-bg-2: #c7c7c7; 47 | --color-bg-3: var(--color-bg-1); 48 | --color-bg-4: var(--color-bg-2); 49 | --color-bg-5: var(--color-bg-1); 50 | --color-bg-6: var(--color-bg-2); 51 | } 52 | 53 | .demo-9 { 54 | --color-bg-1: #2f251e; 55 | --color-bg-2: #43392f; 56 | --color-bg-3: #18130e; 57 | --color-bg-4: var(--color-bg-1); 58 | --color-bg-5: var(--color-bg-2); 59 | --color-bg-6: var(--color-bg-3); 60 | } 61 | 62 | .demo-10 { 63 | --color-bg-1: #9d9d9d; 64 | --color-bg-2: #c7c7c7; 65 | --color-bg-3: #7c7c7c; 66 | --color-bg-4: var(--color-bg-1); 67 | --color-bg-5: var(--color-bg-2); 68 | --color-bg-6: var(--color-bg-3); 69 | } 70 | 71 | /* Page Loader */ 72 | .js .loading::before, 73 | .js .loading::after { 74 | content: ''; 75 | position: fixed; 76 | z-index: 5000; 77 | } 78 | 79 | .js .loading::before { 80 | top: 0; 81 | left: 0; 82 | width: 100%; 83 | height: 100%; 84 | background: var(--color-bg); 85 | } 86 | 87 | .js .loading::after { 88 | top: 50%; 89 | left: 50%; 90 | width: 60px; 91 | height: 60px; 92 | margin: -30px 0 0 -30px; 93 | border-radius: 50%; 94 | opacity: 0.4; 95 | background: var(--color-link); 96 | animation: loaderAnim 0.7s linear infinite alternate forwards; 97 | } 98 | 99 | @keyframes loaderAnim { 100 | to { 101 | opacity: 1; 102 | transform: scale3d(0.5,0.5,1); 103 | } 104 | } 105 | 106 | a { 107 | text-decoration: none; 108 | color: var(--color-link); 109 | outline: none; 110 | cursor: pointer; 111 | } 112 | 113 | a:hover { 114 | color: var(--color-link-hover); 115 | outline: none; 116 | } 117 | 118 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */ 119 | a:focus { 120 | /* Provide a fallback style for browsers 121 | that don't support :focus-visible */ 122 | outline: none; 123 | background: lightgrey; 124 | } 125 | 126 | a:focus:not(:focus-visible) { 127 | /* Remove the focus indicator on mouse-focus for browsers 128 | that do support :focus-visible */ 129 | background: transparent; 130 | } 131 | 132 | a:focus-visible { 133 | /* Draw a very noticeable focus style for 134 | keyboard-focus on browsers that do support 135 | :focus-visible */ 136 | outline: 2px solid red; 137 | background: transparent; 138 | } 139 | 140 | .unbutton { 141 | background: none; 142 | border: 0; 143 | padding: 0; 144 | margin: 0; 145 | font: inherit; 146 | cursor: pointer; 147 | } 148 | 149 | .unbutton:focus { 150 | outline: none; 151 | } 152 | 153 | .frame { 154 | padding: var(--page-padding); 155 | position: relative; 156 | display: grid; 157 | z-index: 1000; 158 | width: 100%; 159 | grid-row-gap: 1rem; 160 | grid-column-gap: 2rem; 161 | justify-items: start; 162 | text-transform: uppercase; 163 | font-size: 12px; 164 | } 165 | 166 | .frame--header { 167 | height: 100%; 168 | z-index: 3000; 169 | background-size: auto 80%; 170 | background-position: 120% 50%; 171 | background-repeat: no-repeat; 172 | grid-template-areas: 'title' 'prev' 'back' 'sub' 'sponsor' 'demos' 'heading'; 173 | } 174 | 175 | .frame--footer { 176 | grid-template-areas: 'credits' 'author'; 177 | align-content: end; 178 | } 179 | 180 | .frame #cdawrap { 181 | justify-self: start; 182 | } 183 | 184 | .frame a { 185 | pointer-events: auto; 186 | } 187 | 188 | .frame__title { 189 | grid-area: title; 190 | font-size: inherit; 191 | margin: 0; 192 | } 193 | 194 | .frame__back { 195 | grid-area: back; 196 | justify-self: start; 197 | } 198 | 199 | .frame__prev { 200 | grid-area: prev; 201 | justify-self: start; 202 | } 203 | 204 | .frame__sub { 205 | grid-area: sub; 206 | } 207 | 208 | .frame__demos { 209 | grid-area: demos; 210 | display: flex; 211 | align-items: center; 212 | gap: 0.5rem; 213 | align-self: start; 214 | flex-wrap: wrap; 215 | background: var(--color-bg); 216 | border: 1px solid; 217 | padding: 1rem; 218 | border-radius: 10px; 219 | } 220 | 221 | .frame__demos > * { 222 | width: 2rem; 223 | display: block; 224 | flex: none; 225 | text-decoration: none; 226 | border-radius: 50%; 227 | aspect-ratio: 1; 228 | border: 1px solid var(--color-link-hover); 229 | display: grid; 230 | place-items: center; 231 | padding-top: 0.2em; 232 | background: var(--color-bg); 233 | } 234 | 235 | .frame__demos > span { 236 | filter: invert(100%); 237 | } 238 | 239 | .frame__demos::before { 240 | content: "Variations:"; 241 | } 242 | 243 | .frame__heading { 244 | grid-area: heading; 245 | align-self: center; 246 | justify-self: start; 247 | width: min-content; 248 | display: flex; 249 | flex-direction: column; 250 | margin-top: 10vh; 251 | } 252 | 253 | .frame__heading h2 { 254 | margin: 0; 255 | line-height: 0.9; 256 | text-transform: uppercase; 257 | margin-left: -0.065em; 258 | font-size: clamp(2.5rem,12vw,7rem); 259 | letter-spacing: -0.105em; 260 | font-variation-settings: "slnt" 0, "wdth" 400, "wght" 900, "INKT" 400; 261 | } 262 | 263 | i { 264 | font-style: normal; 265 | font-variation-settings: "slnt" 0, "wdth" 100, "wght" 400, "INKT" 400; 266 | } 267 | 268 | .frame__heading p { 269 | margin: 0; 270 | } 271 | 272 | .frame__credits { 273 | grid-area: credits; 274 | } 275 | 276 | .frame__author { 277 | display: flex; 278 | gap: 1.5rem; 279 | grid-area: author; 280 | } 281 | 282 | .content { 283 | padding: var(--page-padding); 284 | display: flex; 285 | flex-direction: column; 286 | justify-content: center; 287 | align-items: center; 288 | } 289 | 290 | .content--perspective { 291 | perspective-origin: 50% 0%; 292 | perspective: 1000px; 293 | } 294 | 295 | .text-large { 296 | font-size: clamp(1.5rem,5vw,3rem); 297 | max-width: 900px; 298 | margin: 0 0 0.85em 0; 299 | line-height: 1.2; 300 | font-variation-settings: "slnt" 0, "wdth" 100, "wght" 500, "INKT" 100; 301 | } 302 | 303 | .content--sticky { 304 | width: 100vw; 305 | position: sticky; 306 | top: 0; 307 | --offset: 0px; 308 | top: var(--offset); 309 | height: calc(100vh - var(--offset)); 310 | } 311 | 312 | .content--grid, 313 | .content--grid .content__inner { 314 | display: grid; 315 | overflow: hidden; 316 | grid-column-gap: 5vw; 317 | grid-row-gap: 2vh; 318 | align-content: center; 319 | grid-template-areas: 'content-img' 'content-title' 'content-text'; 320 | justify-items: center; 321 | } 322 | 323 | .content--grid:has(.content__inner) { 324 | display: block; 325 | padding: 0; 326 | } 327 | 328 | .content__inner { 329 | width: 100%; 330 | height: 100%; 331 | border-radius: 0 0 2rem 2rem; 332 | } 333 | 334 | .content--card { 335 | display: flex; 336 | flex-direction: column; 337 | height: 80vh; 338 | width: 95vw; 339 | max-width: 500px; 340 | aspect-ratio: 0.8; 341 | top: 10vh; 342 | margin: auto; 343 | border-radius: 14px; 344 | gap: 3vh; 345 | text-align: center; 346 | margin-bottom: 5vh; 347 | } 348 | 349 | .content--card .content__title { 350 | font-size: clamp(1.5rem,4vw,3.5rem); 351 | } 352 | 353 | .content--card .content__title i { 354 | display: block; 355 | } 356 | 357 | .content--half { 358 | display: flex; 359 | flex-direction: column; 360 | gap: 3vh; 361 | text-align: center; 362 | } 363 | 364 | .content--half:nth-child(odd) { 365 | margin-left: auto; 366 | } 367 | 368 | .content__img { 369 | grid-area: content-img; 370 | width: 50%; 371 | max-width: 300px; 372 | height: auto; 373 | } 374 | 375 | .content__img--large { 376 | width: 60%; 377 | height: auto; 378 | } 379 | 380 | .content__img--small { 381 | height: 35%; 382 | width: auto; 383 | } 384 | 385 | .spacer { 386 | margin-top: 20vh; 387 | } 388 | 389 | .content__title { 390 | grid-area: content-title; 391 | letter-spacing: -0.095em; 392 | text-transform: uppercase; 393 | line-height: 1; 394 | font-weight: normal; 395 | font-size: clamp(2rem,6vw,5rem); 396 | margin: 0; 397 | font-variation-settings: "slnt" 0, "wdth" 400, "wght" 900, "INKT" 400; 398 | } 399 | 400 | .content__text { 401 | margin: 0; 402 | max-width: 500px; 403 | grid-area: content-text; 404 | text-align: center; 405 | line-height: 1.5; 406 | padding: 0 1rem; 407 | backface-visibility: hidden; 408 | } 409 | 410 | .content__text--narrow { 411 | max-width: 300px; 412 | } 413 | 414 | .content--intro { 415 | padding-top: 25vh; 416 | padding-bottom: 25vh; 417 | z-index: 2; 418 | } 419 | 420 | .content--outro { 421 | padding-top: 50vh; 422 | padding-bottom: 30vh; 423 | } 424 | 425 | .bg-1 { background: var(--color-bg-1); } 426 | .bg-2 { background: var(--color-bg-2); } 427 | .bg-3 { background: var(--color-bg-3); } 428 | .bg-4 { background: var(--color-bg-4); } 429 | .bg-5 { background: var(--color-bg-5); } 430 | .bg-6 { background: var(--color-bg-6); } 431 | 432 | @media screen and (min-width: 63em) { 433 | body { 434 | --page-padding: 2rem 3rem; 435 | } 436 | .frame--header { 437 | height: 100vh; 438 | grid-template-columns: auto auto auto 1fr 1fr; 439 | grid-template-rows: auto 1fr auto; 440 | align-content: space-between; 441 | grid-template-areas: 'title back prev sub sponsor' 'heading heading heading heading heading' 'demos demos demos demos demos'; 442 | } 443 | .frame__heading { 444 | margin-top: 0; 445 | } 446 | .frame__heading h2 { 447 | white-space: nowrap; 448 | } 449 | .frame__heading p { 450 | margin: 0 0 0 auto; 451 | } 452 | .content--grid .content__title { 453 | align-self: end; 454 | } 455 | .frame__demos { 456 | position: fixed; 457 | bottom: 2rem; 458 | } 459 | .frame--footer { 460 | padding-bottom: 0; 461 | grid-template-areas: 'credits ...' '... author'; 462 | grid-template-columns: 1fr 1fr; 463 | grid-template-rows: auto 6rem; 464 | } 465 | .frame__author { 466 | align-self: center; 467 | } 468 | .frame #cdawrap { 469 | max-width: 300px; 470 | text-align: right; 471 | } 472 | .frame #cdawrap, 473 | .frame__author, 474 | .frame__sub { 475 | justify-self: end; 476 | } 477 | .content--grid, 478 | .content--grid .content__inner { 479 | grid-template-areas: 'content-img content-title' 'content-img content-text'; 480 | grid-template-columns: 30% 1fr; 481 | justify-items: start; 482 | } 483 | .content__img--large { 484 | width: 160%; 485 | } 486 | .content__img--left { 487 | justify-self: end; 488 | } 489 | .content__text--left { 490 | text-align: left; 491 | align-self: start; 492 | } 493 | .content--card { 494 | width: 50vw; 495 | } 496 | .content--half { 497 | width: 50%; 498 | } 499 | } 500 | -------------------------------------------------------------------------------- /js/lenis.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t||self).Lenis=e()}(this,function(){function t(t,e){for(var i=0;i=1)?1:this.easing(s);this.value=this.from+(this.to-this.from)*r}null==(e=this.onUpdate)||e.call(this,this.value,{completed:n}),n&&this.stop()}},e.stop=function(){this.isRunning=!1},e.fromTo=function(t,e,i){var o=i.lerp,n=void 0===o?.1:o,s=i.duration,r=void 0===s?1:s,l=i.easing,h=void 0===l?function(t){return t}:l,a=i.onUpdate;this.from=this.value=t,this.to=e,this.lerp=n,this.duration=r,this.easing=h,this.currentTime=0,this.isRunning=!0,this.onUpdate=a},t}();function s(t,e){var i;return function(){var o=arguments,n=this;clearTimeout(i),i=setTimeout(function(){t.apply(n,o)},e)}}var r=/*#__PURE__*/function(){function t(t,e){var i=this;this.onWindowResize=function(){i.width=window.innerWidth,i.height=window.innerHeight},this.onWrapperResize=function(){i.width=i.wrapper.clientWidth,i.height=i.wrapper.clientHeight},this.onContentResize=function(){var t=i.wrapper===window?document.documentElement:i.wrapper;i.scrollHeight=t.scrollHeight,i.scrollWidth=t.scrollWidth},this.wrapper=t,this.content=e,this.wrapper===window?(window.addEventListener("resize",this.onWindowResize,!1),this.onWindowResize()):(this.wrapperResizeObserver=new ResizeObserver(s(this.onWrapperResize,100)),this.wrapperResizeObserver.observe(this.wrapper),this.onWrapperResize()),this.contentResizeObserver=new ResizeObserver(s(this.onContentResize,100)),this.contentResizeObserver.observe(this.content),this.onContentResize()}return t.prototype.destroy=function(){var t,e;window.removeEventListener("resize",this.onWindowResize,!1),null==(t=this.wrapperResizeObserver)||t.disconnect(),null==(e=this.contentResizeObserver)||e.disconnect()},e(t,[{key:"limit",get:function(){return{x:this.scrollWidth-this.width,y:this.scrollHeight-this.height}}}]),t}(),l=/*#__PURE__*/function(){function t(t,e){var i=this,n=e.wheelMultiplier,s=void 0===n?1:n,r=e.touchMultiplier,l=void 0===r?2:r,h=e.normalizeWheel,a=void 0!==h&&h;this.onTouchStart=function(t){var e=t.targetTouches?t.targetTouches[0]:t,o=e.clientY;i.touchStart.x=e.clientX,i.touchStart.y=o,i.lastDelta={x:0,y:0}},this.onTouchMove=function(t){var e=t.targetTouches?t.targetTouches[0]:t,o=e.clientX,n=e.clientY,s=-(o-i.touchStart.x)*i.touchMultiplier,r=-(n-i.touchStart.y)*i.touchMultiplier;i.touchStart.x=o,i.touchStart.y=n,i.lastDelta={x:s,y:r},i.emitter.emit("scroll",{type:"touch",deltaX:s,deltaY:r,event:t})},this.onTouchEnd=function(t){i.emitter.emit("scroll",{type:"touch",inertia:!0,deltaX:i.lastDelta.x,deltaY:i.lastDelta.y,event:t})},this.onWheel=function(t){var e=t.deltaX,n=t.deltaY;i.normalizeWheel&&(e=o(-100,e,100),n=o(-100,n,100)),i.emitter.emit("scroll",{type:"wheel",deltaX:e*=i.wheelMultiplier,deltaY:n*=i.wheelMultiplier,event:t})},this.element=t,this.wheelMultiplier=s,this.touchMultiplier=l,this.normalizeWheel=a,this.touchStart={x:null,y:null},this.emitter={events:{},emit:function(t){for(var e=this.events[t]||[],i=0,o=e.length;iMath.abs(s)?r:s:"horizontal"===e.options.gestureOrientation&&(c=s);var u=h&&e.options.syncTouch,p=h&&n&&Math.abs(c)>1;p&&(c=e.velocity*e.options.touchInertiaMultiplier),e.scrollTo(e.targetScroll+c,i({programmatic:!1},u&&{lerp:p?e.syncTouchLerp:.4}))}}},this.onScroll=function(){if(!e.isScrolling){var t=e.animatedScroll;e.animatedScroll=e.targetScroll=e.actualScroll,e.velocity=0,e.direction=Math.sign(e.animatedScroll-t),e.emit()}},s&&console.warn("Lenis: `direction` option is deprecated, use `orientation` instead"),h&&console.warn("Lenis: `gestureDirection` option is deprecated, use `gestureOrientation` instead"),a&&console.warn("Lenis: `mouseMultiplier` option is deprecated, use `wheelMultiplier` instead"),c&&console.warn("Lenis: `smooth` option is deprecated, use `smoothWheel` instead"),window.lenisVersion="1.0.11",p!==document.documentElement&&p!==document.body||(p=window),this.options={wrapper:p,content:v,wheelEventsTarget:f,smoothWheel:w,smoothTouch:y,syncTouch:b,syncTouchLerp:M,touchInertiaMultiplier:L,duration:W,easing:O,lerp:k,infinite:H,gestureOrientation:Y,orientation:D,touchMultiplier:P,wheelMultiplier:A,normalizeWheel:V},this.dimensions=new r(p,v),this.rootElement.classList.add("lenis"),this.velocity=0,this.isStopped=!1,this.isSmooth=w||y,this.isScrolling=!1,this.targetScroll=this.animatedScroll=this.actualScroll,this.animate=new n,this.emitter={events:{},emit:function(t){for(var e=this.events[t]||[],i=0,o=e.length;i0&&e<0||t<0&&e>0)&&(e+=t),e):this.animatedScroll;var t,e}},{key:"progress",get:function(){return 0===this.limit?1:this.scroll/this.limit}},{key:"isSmooth",get:function(){return this.__isSmooth},set:function(t){this.__isSmooth!==t&&(this.rootElement.classList.toggle("lenis-smooth",t),this.__isSmooth=t)}},{key:"isScrolling",get:function(){return this.__isScrolling},set:function(t){this.__isScrolling!==t&&(this.rootElement.classList.toggle("lenis-scrolling",t),this.__isScrolling=t)}},{key:"isStopped",get:function(){return this.__isStopped},set:function(t){this.__isStopped!==t&&(this.rootElement.classList.toggle("lenis-stopped",t),this.__isStopped=t)}}]),t}();return h}); -------------------------------------------------------------------------------- /js/ScrollTrigger.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * ScrollTrigger 3.12.2 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2023, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for Club GreenSock members, the agreement issued with that membership. 7 | * @author: Jack Doyle, jack@greensock.com 8 | */ 9 | 10 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for(var r=0;r=Math.abs(r)?t:r}function O(){(Ae=Se.core.globals().ScrollTrigger)&&Ae.core&&function _integrate(){var e=Ae.core,r=e.bridge||{},t=e._scrollers,n=e._proxies;t.push.apply(t,ze),n.push.apply(n,Ie),ze=t,Ie=n,i=function _bridge(e,t){return r[e](t)}}()}function P(e){return(Se=e||r())&&"undefined"!=typeof document&&document.body&&(Te=window,Pe=(Ce=document).documentElement,Me=Ce.body,t=[Te,Ce,Pe,Me],Se.utils.clamp,De=Se.core.context||function(){},Oe="onpointerenter"in Me?"pointer":"mouse",Ee=E.isTouch=Te.matchMedia&&Te.matchMedia("(hover: none), (pointer: coarse)").matches?1:"ontouchstart"in Te||0=o,n=Math.abs(t)>=o;k&&(r||n)&&k(se,e,t,be,me),r&&(m&&0Math.abs(t)?"x":"y",ie=!0),"y"!==ae&&(be[2]+=e,se._vx.update(e,!0)),"x"!==ae&&(me[2]+=t,se._vy.update(t,!0)),n?ee=ee||requestAnimationFrame(bf):bf()}function ef(e){if(!_e(e,1)){var t=(e=M(e,s)).clientX,r=e.clientY,n=t-se.x,o=r-se.y,i=se.isDragging;se.x=t,se.y=r,(i||Math.abs(se.startX-t)>=a||Math.abs(se.startY-r)>=a)&&(h&&(re=!0),i||(se.isDragging=!0),df(n,o),i||p&&p(se))}}function hf(e){return e.touches&&1=e)return a[n];return a[n-1]}for(n=a.length,e+=r;n--;)if(a[n]<=e)return a[n];return a[0]}:function(e,t,r){void 0===r&&(r=.001);var n=i(e);return!t||Math.abs(n-e)r&&(n*=t/100),e=e.substr(0,r-1)),e=n+(e in q?q[e]*t:~e.indexOf("%")?parseFloat(e)*t/100:parseFloat(e)||0)}return e}function Bb(e,t,r,n,o,i,a,s){var l=o.startColor,c=o.endColor,u=o.fontSize,f=o.indent,d=o.fontWeight,p=Xe.createElement("div"),g=Ja(r)||"fixed"===z(r,"pinType"),h=-1!==e.indexOf("scroller"),v=g?We:r,b=-1!==e.indexOf("start"),m=b?l:c,y="border-color:"+m+";font-size:"+u+";color:"+m+";font-weight:"+d+";pointer-events:none;white-space:nowrap;font-family:sans-serif,Arial;z-index:1000;padding:4px 8px;border-width:0;border-style:solid;";return y+="position:"+((h||s)&&g?"fixed;":"absolute;"),!h&&!s&&g||(y+=(n===He?D:I)+":"+(i+parseFloat(f))+"px;"),a&&(y+="box-sizing:border-box;text-align:left;width:"+a.offsetWidth+"px;"),p._isStart=b,p.setAttribute("class","gsap-marker-"+e+(t?" marker-"+t:"")),p.style.cssText=y,p.innerText=t||0===t?e+"-"+t:e,v.children[0]?v.insertBefore(p,v.children[0]):v.appendChild(p),p._offset=p["offset"+n.op.d2],H(p,0,n,b),p}function Gb(){return 34We.clientWidth)||(ze.cache++,v?k=k||requestAnimationFrame(Q):Q(),st||V("scrollStart"),st=at())}function Ib(){y=Ne.innerWidth,m=Ne.innerHeight}function Jb(){ze.cache++,je||h||Xe.fullscreenElement||Xe.webkitFullscreenElement||b&&y===Ne.innerWidth&&!(Math.abs(Ne.innerHeight-m)>.25*Ne.innerHeight)||c.restart(!0)}function Mb(){return vb(re,"scrollEnd",Mb)||Pt(!0)}function Pb(e){for(var t=0;tt)&&e.setPositions(e.start,Math.max(e.start+1,t),!0)}),r.forEach(function(e){return e&&e.render&&e.render(-1)}),ze.forEach(function(e){Ra(e)&&(e.smooth&&requestAnimationFrame(function(){return e.target.style.scrollBehavior="smooth"}),e.rec&&e(e.rec))}),Rb(_,1),c.pause(),Ct++,Q(rt=2),kt.forEach(function(e){return Ra(e.vars.onRefresh)&&e.vars.onRefresh(e)}),rt=re.isRefreshing=!1,V("refresh")}else ub(re,"scrollEnd",Mb)},j=0,Mt=1,Q=function _updateAll(e){if(!rt||2===e){re.isUpdating=!0,ot&&ot.update(0);var t=kt.length,r=at(),n=50<=r-T,o=t&&kt[0].scroll();if(Mt=o=F})},ke.update=function(e,t,r){if(!de||r||e){var n,o,i,a,s,l,c,u=!0===rt?re:ke.scroll(),f=e?0:(u-D)/N,d=f<0?0:1=Oa(be,he),fe)if(e||!n&&!l)lc(ae,V);else{var g=_t(ae,!0),h=u-D;lc(ae,We,g.top+(he===He?h:0)+xt,g.left+(he===He?0:h)+xt)}Et(n||l?W:G),Z&&d<1&&n||b(j+(1!==d||l?0:Q))}}else b(Ga(j+Q*d));!ue||A.tween||je||it||te.restart(!0),T&&(s||ce&&d&&(d<1||!tt))&&Ge(T.targets).forEach(function(e){return e.classList[n||ce?"add":"remove"](T.className)}),!k||ve||e||k(ke),a&&!je?(ve&&(c&&("complete"===i?O.pause().totalProgress(1):"reset"===i?O.restart(!0).pause():"restart"===i?O.restart(!0):O[i]()),k&&k(ke)),!s&&tt||(C&&s&&Va(ke,C),xe[o]&&Va(ke,xe[o]),ce&&(1===d?ke.kill(!1,1):xe[o]=0),s||xe[o=1===d?1:3]&&Va(ke,xe[o])),pe&&!n&&Math.abs(ke.getVelocity())>(Sa(pe)?pe:2500)&&(Ua(ke.callbackAnimation),ee?ee.progress(1):Ua(O,"reverse"===i?1:!d,1))):ve&&k&&!je&&k(ke)}if(x){var v=de?u/de.duration()*(de._caScrollDist||0):u;y(v+(q._isFlipped?1:0)),x(v)}S&&S(-u/de.duration()*(de._caScrollDist||0))}},ke.enable=function(e,t){ke.enabled||(ke.enabled=!0,ub(be,"resize",Jb),me||ub(be,"scroll",Hb),Te&&ub(ScrollTrigger,"refreshInit",Te),!1!==e&&(ke.progress=Oe=0,R=B=Me=Ae()),!1!==t&&ke.refresh())},ke.getTween=function(e){return e&&A?A.tween:ee},ke.setPositions=function(e,t,r,n){if(de){var o=de.scrollTrigger,i=de.duration(),a=o.end-o.start;e=o.start+a*e/i,t=o.start+a*t/i}ke.refresh(!1,!1,{start:Ba(e,r&&!!ke._startClamp),end:Ba(t,r&&!!ke._endClamp)},n),ke.update()},ke.adjustPinSpacing=function(e){if($&&e){var t=$.indexOf(he.d)+1;$[t]=parseFloat($[t])+e+xt,$[1]=parseFloat($[1])+e+xt,Et($)}},ke.disable=function(e,t){if(ke.enabled&&(!1!==e&&ke.revert(!0,!0),ke.enabled=ke.isActive=!1,t||ee&&ee.pause(),re=0,n&&(n.uncache=1),Te&&vb(ScrollTrigger,"refreshInit",Te),te&&(te.pause(),A.tween&&A.tween.kill()&&(A.tween=0)),!me)){for(var r=kt.length;r--;)if(kt[r].scroller===be&&kt[r]!==ke)return;vb(be,"resize",Jb),me||vb(be,"scroll",Hb)}},ke.kill=function(e,t){ke.disable(e,t),ee&&!t&&ee.kill(),a&&delete Tt[a];var r=kt.indexOf(ke);0<=r&&kt.splice(r,1),r===Qe&&0i&&(b()>i?a.progress(1)&&b(i):a.resetTo("scrollY",i))}Ta(e)||(e={}),e.preventDefault=e.isNormalizer=e.allowClicks=!0,e.type||(e.type="wheel,touch"),e.debounce=!!e.debounce,e.id=e.id||"normalizer";var n,i,l,o,a,c,u,s,f=e.normalizeScrollX,t=e.momentum,r=e.allowNestedScroll,d=e.onRelease,p=J(e.target)||Je,g=Le.core.globals().ScrollSmoother,h=g&&g.get(),v=R&&(e.content&&J(e.content)||h&&!1!==e.content&&!h.smooth()&&h.content()),b=K(p,He),m=K(p,qe),y=1,x=(E.isTouch&&Ne.visualViewport?Ne.visualViewport.scale*Ne.visualViewport.width:Ne.outerWidth)/Ne.innerWidth,_=0,w=Ra(t)?function(){return t(n)}:function(){return t||2.8},S=uc(p,e.type,!0,r),k=Fa,T=Fa;return v&&Le.set(v,{y:"+=0"}),e.ignoreCheck=function(e){return R&&"touchmove"===e.type&&function ignoreDrag(){if(o){requestAnimationFrame(rq);var e=Ga(n.deltaY/2),t=T(b.v-e);if(v&&t!==b.v+b.offset){b.offset=t-b.v;var r=Ga((parseFloat(v&&v._gsap.y)||0)-b.offset);v.style.transform="matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, "+r+", 0, 1)",v._gsap.y=r+"px",b.cacheID=ze.cache,Q()}return!0}b.offset&&vq(),o=!0}()||1.05=i||i-1<=r)&&Le.to({},{onUpdate:Bq,duration:o})}else s.restart(!0);d&&d(e)},e.onWheel=function(){a._ts&&a.pause(),1e3