18 |
29 |
30 |
Projects * Insomnia * Projects * Insomnia * Projects * Insomnia * Projects
31 | 1984 - 2022
32 |
33 |
34 |
42 |
52 |
53 |
54 |
55 |
56 | 01
57 | Cast a spell
58 |
59 | All natural and technological processes
60 | Proceed in such a way that the availability
61 | Of the remaining energy decreases
62 |
63 |
64 |
65 |
66 |
67 | 02
68 | Corruption
69 |
70 | In all energy exchanges, if no energy
71 | Enters or leaves an isolated system
72 | The entropy of that system increases
73 |
74 |
75 |
76 |
77 |
78 | 03
79 | All their lives
80 |
81 | All natural and technological processes
82 | Proceed in such a way that the availability
83 | Of the remaining energy decreases
84 |
85 |
86 |
87 |
88 |
89 | 04
90 | You'll burn in hell
91 |
92 | All natural and technological processes
93 | Proceed in such a way that the availability
94 | Of the remaining energy decreases
95 |
96 |
97 |
98 |
99 |
100 | 05
101 | What we become
102 |
103 | All natural and technological processes
104 | Proceed in such a way that the availability
105 | Of the remaining energy decreases
106 |
107 |
108 |
109 |
110 |
111 | 06
112 | Take a bow
113 |
114 | All natural and technological processes
115 | Proceed in such a way that the availability
116 | Of the remaining energy decreases
117 |
118 |
119 |
120 |
121 |
122 | 07
123 | You bring death
124 |
125 | All natural and technological processes
126 | Proceed in such a way that the availability
127 | Of the remaining energy decreases
128 |
129 |
130 |
131 |
132 |
133 | 08
134 | You must pay
135 |
136 | All natural and technological processes
137 | Proceed in such a way that the availability
138 | Of the remaining energy decreases
139 |
140 |
141 |
142 |
143 |
144 | 09
145 | Feed the hex
146 |
147 | All natural and technological processes
148 | Proceed in such a way that the availability
149 | Of the remaining energy decreases
150 |
151 |
152 |
153 |
154 |
155 | 10
156 | Beg for their lives
157 |
158 | All natural and technological processes
159 | Proceed in such a way that the availability
160 | Of the remaining energy decreases
161 |
162 |
163 |
164 |
165 |
166 | 11
167 | For all your sins
168 |
169 | All natural and technological processes
170 | Proceed in such a way that the availability
171 | Of the remaining energy decreases
172 |
173 |
174 |
175 |
176 |
177 | 12
178 | Beholden
179 |
180 | All natural and technological processes
181 | Proceed in such a way that the availability
182 | Of the remaining energy decreases
183 |
184 |
185 |
186 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
1 | import { preloadImages, isInViewport } from './utils';
2 | import { Item } from './item';
3 | import Lenis from '@studio-freight/lenis'
4 | import { gsap } from 'gsap';
5 | import { ScrollTrigger } from 'gsap/ScrollTrigger';
6 | gsap.registerPlugin(ScrollTrigger);
7 | import { Flip } from 'gsap/Flip';
8 | gsap.registerPlugin(Flip);
9 |
10 | // Item instances (Item is the .content > figure.item)
11 | const items = [];
12 | [...document.querySelectorAll('.item')].forEach(item => {
13 | items.push(new Item(item));
14 | });
15 |
16 | // Toggle grid view
17 | const switchCtrl = {
18 | grid: document.querySelector('.switch__button--grid'),
19 | list: document.querySelector('.switch__button--list')
20 | };
21 |
22 | // Text element that moves horizontally as we scroll
23 | const heading = {
24 | el: document.querySelector('.heading'),
25 | main: document.querySelector('.heading .heading__main'),
26 | }
27 |
28 | // Placeholder for the grid items (.item__image). We'll use the gsap FLIP plugin to move the "".item .item__image" inside the grid element
29 | const grid = document.querySelector('.grid');
30 |
31 | // Lenis smooth scrolling
32 | let lenis;
33 |
34 | // Initialize Lenis smooth scrolling
35 | const initSmoothScrolling = () => {
36 | lenis = new Lenis({
37 | lerp: 0.1,
38 | smooth: true,
39 | });
40 | const scrollFn = (time) => {
41 | lenis.raf(time);
42 | requestAnimationFrame(scrollFn);
43 | };
44 | requestAnimationFrame(scrollFn);
45 | };
46 |
47 | // ScrollTrigger animations for scrolling
48 | const animateOnScroll = () => {
49 |
50 | for (const item of items) {
51 |
52 | gsap.set(item.DOM.imageInner, {transformOrigin: '50% 0%'});
53 |
54 | gsap.timeline({
55 | scrollTrigger: {
56 | trigger: item.DOM.el,
57 | start: 'top bottom',
58 | end: 'bottom top',
59 | scrub: true
60 | }
61 | })
62 | .addLabel('start', 0)
63 | // scale up the inner image
64 | .to(item.DOM.imageInner, {
65 | ease: 'none',
66 | scaleY: 2.4,
67 | scaleX: 1.2,
68 | opacity: 0
69 | }, 'start')
70 | // translate the title and number
71 | .to([item.DOM.title, item.DOM.number], {
72 | ease: 'none',
73 | yPercent: -150,
74 | }, 'start')
75 | // translate the inner title/number (overflow is hidden so they get hidden)
76 | .to([item.DOM.titleInner, item.DOM.numberInner], {
77 | scrollTrigger: {
78 | trigger: item.DOM.el,
79 | start: 'top bottom',
80 | end: 'top 20%',
81 | scrub: true,
82 | },
83 | ease: 'expo.in',
84 | yPercent: -100
85 | }, 'start')
86 | /*
87 | .to(item.DOM.description, {
88 | scrollTrigger: {
89 | trigger: item.DOM.el,
90 | start: 'top bottom',
91 | end: 'bottom top',
92 | scrub: true,
93 | },
94 | ease: 'none',
95 | yPercent: 100
96 | }, 'start')
97 | */
98 |
99 | }
100 |
101 | // animate the heading element as we scroll (horizontally)
102 | let windowWidth = window.innerWidth;
103 | gsap.to(heading.main, {
104 | scrollTrigger: {
105 | start: 0,
106 | end: 'max',
107 | scrub: true
108 | },
109 | ease: 'none',
110 | x: () => -heading.main.offsetWidth - (13.25*windowWidth/100 + 25*windowWidth/100 + windowWidth/100) + windowWidth
111 | });
112 | };
113 |
114 | const showGrid = () => {
115 |
116 | document.body.classList.add('grid-open');
117 |
118 | // stop the smooth scrolling
119 | lenis.stop();
120 |
121 | // get the DOM elements that we'll work with
122 | const DOM = getDOMElements();
123 |
124 | // Disable active ScrollTrigger instances
125 | let Alltrigger = ScrollTrigger.getAll();
126 | for (let i = 0; i < Alltrigger.length; i++) {
127 | Alltrigger[i].disable(false);
128 | }
129 |
130 | // Use gsap flip for the animation
131 | // save the current state of the images
132 | const flipstate = Flip.getState(DOM.allImages);
133 | // put them inside the .grid element
134 | grid.append(...DOM.allImages);
135 |
136 | // gsap stagger properties
137 | const staggerConfig = {
138 | grid: 'auto',
139 | // the order goes from the first item inside the viewport
140 | from: DOM.inViewportItems.length ? items.indexOf(DOM.inViewportItems[0]) : 0,
141 | amount: 0.06,
142 | };
143 |
144 | // Flip it
145 | Flip.from(flipstate, {
146 | duration: 0.7,
147 | ease: 'power3.inOut',
148 | scale: true,
149 | stagger: staggerConfig
150 | })
151 | // Also reset scales applied to the inner images (items inside the viewport)
152 | .to(DOM.inViewportImagesInner, {
153 | duration: 0.7,
154 | ease: 'power3.inOut',
155 | scaleX: 1,
156 | scaleY: 1,
157 | opacity: 1,
158 | stagger: staggerConfig
159 | }, 0)
160 | // For the items outside of the viewport, simply reset the scales with no animation
161 | .set(DOM.outViewportImagesInner, {
162 | scaleX: 1,
163 | scaleY: 1,
164 | opacity: 1
165 | }, 0)
166 | // hide the titles and numbers inner elments by translating them up
167 | .to([DOM.inViewportTitlesInner, DOM.inViewportNumbersInner], {
168 | duration: 0.4,
169 | ease: 'power3.inOut',
170 | yPercent: -100,
171 | opacity: 0
172 | }, 0)
173 | // hide description
174 | .to(DOM.inViewportDescription, {
175 | duration: 0.4,
176 | ease: 'power3.inOut',
177 | opacity: 0
178 | }, 0)
179 | // For all the items outside the viewport, simply set opacity to 0
180 | .set([DOM.outViewportTitlesInner, DOM.outViewportNumbersInner, DOM.outViewportDescription], {
181 | opacity: 0,
182 | }, 0)
183 | // hide the heading element
184 | .to(heading.el, {
185 | duration: 0.7,
186 | ease: 'power3.inOut',
187 | yPercent: -100,
188 | x: -100
189 | }, 0);
190 |
191 | };
192 |
193 | const hideGrid = () => {
194 |
195 | document.body.classList.remove('grid-open');
196 |
197 | // restart the smooth scrolling
198 | lenis.start();
199 |
200 | // get the DOM elements that we'll work with
201 | const DOM = getDOMElements();
202 |
203 | const flipstate = Flip.getState([DOM.allImages, DOM.allImagesInner], {props: 'opacity'});
204 |
205 | DOM.allImages.forEach((image,pos) => {
206 | items[pos].DOM.imageWrap.appendChild(image)
207 | });
208 |
209 | // Enable ScrollTrigger instances
210 | let Alltrigger = ScrollTrigger.getAll();
211 | for (let i = 0; i < Alltrigger.length; i++) {
212 | Alltrigger[i].enable(false);
213 | }
214 |
215 | Flip.from(flipstate, {
216 | duration: 0.7,
217 | ease: 'power3.inOut',
218 | scale: true,
219 | })
220 | .to([DOM.inViewportTitlesInner, DOM.inViewportNumbersInner, DOM.inViewportDescription], {
221 | duration: 0.4,
222 | ease: 'power3.inOut',
223 | startAt: {opacity: 0},
224 | opacity: 1
225 | }, 0)
226 | .set([DOM.outViewportTitlesInner, DOM.outViewportNumbersInner, DOM.outViewportDescription], {
227 | opacity: 1
228 | }, 0)
229 | .to(heading.el, {
230 | duration: 0.7,
231 | ease: 'power3.inOut',
232 | yPercent: 0,
233 | x: 0
234 | }, 0);
235 |
236 | }
237 |
238 | // Returns some DOM elements that are needed for showing/hiding the grid
239 | const getDOMElements = () => {
240 | const inViewportItems = items.filter(item => isInViewport(item.DOM.el));
241 | const outViewportItems = items.filter(n => !inViewportItems.includes(n));
242 |
243 | return {
244 | allImages: items.map(item => item.DOM.image),
245 | allImagesInner: items.map(item => item.DOM.imageInner),
246 | inViewportItems: inViewportItems,
247 | outViewportItems: outViewportItems,
248 | inViewportImagesInner: inViewportItems.map(item => item.DOM.imageInner),
249 | outViewportImagesInner: outViewportItems.map(item => item.DOM.imageInner),
250 | inViewportDescription: inViewportItems.map(item => item.DOM.description),
251 | outViewportDescription: outViewportItems.map(item => item.DOM.description),
252 | inViewportTitlesInner: inViewportItems.map(item => item.DOM.titleInner),
253 | outViewportTitlesInner: outViewportItems.map(item => item.DOM.titleInner),
254 | inViewportNumbersInner: inViewportItems.map(item => item.DOM.numberInner),
255 | outViewportNumbersInner: outViewportItems.map(item => item.DOM.numberInner)
256 | };
257 | }
258 |
259 | // Initialize the events
260 | const initEvents = () => {
261 |
262 | // show grid ctrl click
263 | switchCtrl.grid.addEventListener('click', () => {
264 | switchCtrl.grid.classList.add('switch__button--hidden', 'switch__button--current');
265 | switchCtrl.list.classList.remove('switch__button--hidden', 'switch__button--current');
266 | showGrid();
267 | });
268 | // hide grid ctrl click
269 | switchCtrl.list.addEventListener('click', () => {
270 | switchCtrl.list.classList.add('switch__button--hidden', 'switch__button--current');
271 | switchCtrl.grid.classList.remove('switch__button--hidden', 'switch__button--current');
272 | hideGrid();
273 | });
274 |
275 | };
276 |
277 | // Preload images
278 | preloadImages('.item__image-inner').then(() => {
279 | document.body.classList.remove('loading');
280 |
281 | initSmoothScrolling();
282 | animateOnScroll();
283 | initEvents();
284 | });
--------------------------------------------------------------------------------
/src/js/item.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Class representing an Item element (.item)
3 | */
4 | export class Item {
5 | // DOM elements
6 | DOM = {
7 | // main element (.item)
8 | el: null,
9 | // caption (.item__caption)
10 | caption : null,
11 | // imageWrap (.item__image-wrap)
12 | imageWrap: null,
13 | // image (.item__image)
14 | image: null,
15 | // imageInner (.item__image > .item__image-inner)
16 | imageInner: null,
17 | // title (.item__caption-title)
18 | title: null,
19 | // titleInner (.item__caption-title > .oh__inner)
20 | titleInner: null,
21 | // number (.item__caption-number)
22 | number: null,
23 | // numberInner (.item__caption-number > .oh__inner)
24 | numberInner: null,
25 | // description (.item__caption-description)
26 | description: null,
27 | };
28 |
29 | /**
30 | * Constructor.
31 | * @param {Element} DOM_el - main element (.item)
32 | */
33 | constructor(DOM_el) {
34 | this.DOM.el = DOM_el;
35 | this.DOM.caption = this.DOM.el.querySelector('.item__caption');
36 | this.DOM.imageWrap = this.DOM.el.querySelector('.item__image-wrap');
37 | this.DOM.image = this.DOM.el.querySelector('.item__image');
38 | this.DOM.imageInner = this.DOM.image.querySelector('.item__image-inner');
39 | this.DOM.title = this.DOM.el.querySelector('.item__caption-title');
40 | this.DOM.titleInner = this.DOM.title.querySelector('.oh__inner');
41 | this.DOM.number = this.DOM.el.querySelector('.item__caption-number');
42 | this.DOM.numberInner = this.DOM.number.querySelector('.oh__inner');
43 | this.DOM.description = this.DOM.el.querySelector('.item__caption-description');
44 | }
45 | }
--------------------------------------------------------------------------------
/src/js/preloader.js:
--------------------------------------------------------------------------------
1 | const imagesLoaded = require('imagesloaded');
2 |
3 | const body = document.body;
4 | export const preloader = selector => {
5 | return new Promise(resolve => {
6 |
7 | const imgwrap = document.createElement('div');
8 | imgwrap.style.visibility = 'hidden';
9 | body.appendChild(imgwrap);
10 |
11 | [...document.querySelectorAll(selector)].forEach(el => {
12 | const imgEl = document.createElement('img');
13 | imgEl.style.width = 0;
14 | imgEl.src = el.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
15 | imgEl.className = 'preload';
16 | imgwrap.appendChild(imgEl);
17 | });
18 |
19 | imagesLoaded(document.querySelectorAll('.preload'), () => {
20 | imgwrap.parentNode.removeChild(imgwrap);
21 | body.classList.remove('loading');
22 | resolve();
23 | });
24 |
25 | });
26 | };
--------------------------------------------------------------------------------
/src/js/utils.js:
--------------------------------------------------------------------------------
1 | const imagesLoaded = require('imagesloaded');
2 |
3 | /**
4 | * Preload images
5 | * @param {String} selector - Selector/scope from where images need to be preloaded. Default is 'img'
6 | */
7 | const preloadImages = (selector = 'img') => {
8 | return new Promise((resolve) => {
9 | imagesLoaded(document.querySelectorAll(selector), {background: true}, resolve);
10 | });
11 | };
12 |
13 | /**
14 | * Wraps the elements of an array.
15 | * @param {Array} arr - the array of elements to be wrapped
16 | * @param {String} wrapType - the type of the wrap element ('div', 'span' etc)
17 | * @param {String} wrapClass - the wrap class(es)
18 | */
19 | const wrapLines = (arr, wrapType, wrapClass) => {
20 | arr.forEach(el => {
21 | const wrapEl = document.createElement(wrapType);
22 | wrapEl.classList = wrapClass;
23 | el.parentNode.appendChild(wrapEl);
24 | wrapEl.appendChild(el);
25 | });
26 | }
27 |
28 | /**
29 | * Checks if an element is in the viewport
30 | * @param {Element} elem - the element to be checked
31 | */
32 | const isInViewport = elem => {
33 | var bounding = elem.getBoundingClientRect();
34 | return (
35 | (bounding.bottom >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) || bounding.top >= 0 && bounding.top <= (window.innerHeight || document.documentElement.clientHeight)) &&
36 | (bounding.right >= 0 && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) || bounding.left >= 0 && bounding.left <= (window.innerWidth || document.documentElement.clientWidth))
37 | );
38 | };
39 |
40 | export {
41 | preloadImages,
42 | wrapLines,
43 | isInViewport,
44 | };
--------------------------------------------------------------------------------