├── .editorconfig ├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE │ ├── bug_request.md │ └── feature-request.md ├── .gitignore ├── .npmrc ├── .nvmrc ├── .prettierrc ├── .vscode └── settings.json ├── README.md ├── assets ├── README.md ├── fonts │ ├── EG-Metaphor-Sans.woff2 │ └── System-85-Mono.woff2 ├── js │ ├── mixins │ │ └── RouteTransition.js │ └── utils │ │ ├── Arrays.js │ │ ├── Color.js │ │ ├── PortableTextToPlainText.js │ │ ├── Random.js │ │ ├── SanityHSL.js │ │ ├── Strings.js │ │ └── Viewport.js └── styles │ ├── _vars.scss │ ├── reset.css │ └── typography.scss ├── components ├── README.md ├── atoms │ ├── Copy │ │ ├── CopyCode.vue │ │ ├── CopyHighlight.vue │ │ ├── CopyLink.vue │ │ ├── CopyLinkInternal.vue │ │ └── CopyUnderline.vue │ ├── Fab.vue │ ├── Grid.vue │ ├── GridColumn.vue │ ├── Icons │ │ ├── IconArrowUp.vue │ │ ├── IconArrows.vue │ │ ├── IconEllipsis.vue │ │ ├── IconPlay.vue │ │ └── IconStop.vue │ ├── LazyTime.vue │ ├── Pic.vue │ ├── PicSVG.vue │ ├── Theme.vue │ ├── Tooltip.vue │ ├── Type.vue │ └── Vid.vue ├── organisms │ ├── Abacus.vue │ ├── Copy.vue │ ├── Piece.vue │ ├── Slideshow-old.vue │ ├── Slideshow.vue │ ├── SlideshowNew.vue │ ├── canvas │ │ ├── BlockMoodboardFile.vue │ │ └── BlockMoodboardFileUploader.vue │ ├── pages │ │ └── homepage │ │ │ ├── Bio.vue │ │ │ ├── Colophon.vue │ │ │ ├── Details.vue │ │ │ ├── Egg.vue │ │ │ └── Logo.vue │ ├── site-footer │ │ └── SiteFooter.vue │ ├── site-header │ │ ├── SiteHeader.vue │ │ ├── SiteHeaderMeta.vue │ │ └── SiteHeaderNavigation.vue │ └── site-menu │ │ └── SiteMenu.vue └── templates │ ├── Debug.vue │ ├── Pieces.vue │ ├── Scrim.vue │ └── Slices.vue ├── docs └── pull_request_template.md ├── jsconfig.json ├── layouts ├── README.md ├── default.vue └── error.vue ├── middleware └── README.md ├── netlify.toml ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── README.md ├── _id.vue ├── canvas │ ├── index.vue │ └── moodboard.vue ├── grid.vue ├── index.vue ├── is │ ├── _slug.vue │ └── index.vue ├── logs │ └── index.vue ├── test.vue ├── typography.vue └── work │ ├── _id.vue │ └── index.vue ├── plugins ├── Device.client.js ├── Grid.js ├── IntersectionObserver.client.js ├── PageMetadata.js ├── README.md ├── Routes.js ├── Sanity.js ├── Scroll.client.js ├── ThemeChanger.js ├── ThemeScroller.js ├── Type.js ├── ViewportAnimations.client.js ├── VueSwipeEvents.client.js ├── device │ ├── DeviceInfo.js │ ├── PreferredMotion.js │ ├── PreferredTheme.js │ ├── WindowBreakpoints.js │ ├── WindowDimensions.js │ ├── WindowResize.js │ └── WindowScroll.js └── gsap │ ├── CSSPlugin.js │ ├── CSSRulePlugin.js │ ├── CustomBounce.js │ ├── CustomEase.js │ ├── CustomWiggle.js │ ├── Draggable.js │ ├── DrawSVGPlugin.js │ ├── EasePack.js │ ├── EaselPlugin.js │ ├── GSDevTools.js │ ├── InertiaPlugin.js │ ├── MorphSVGPlugin.js │ ├── MotionPathHelper.js │ ├── MotionPathPlugin.js │ ├── Physics2DPlugin.js │ ├── PhysicsPropsPlugin.js │ ├── PixiPlugin.js │ ├── README.md │ ├── ScrambleTextPlugin.js │ ├── ScrollToPlugin.js │ ├── SplitText.js │ ├── TextPlugin.js │ ├── all.js │ ├── gsap-core.js │ ├── index.js │ ├── package.json │ ├── src │ ├── CSSPlugin.js │ ├── CSSRulePlugin.js │ ├── CustomBounce.js │ ├── CustomEase.js │ ├── CustomWiggle.js │ ├── Draggable.js │ ├── DrawSVGPlugin.js │ ├── EasePack.js │ ├── EaselPlugin.js │ ├── GSDevTools.js │ ├── InertiaPlugin.js │ ├── MorphSVGPlugin.js │ ├── MotionPathHelper.js │ ├── MotionPathPlugin.js │ ├── Physics2DPlugin.js │ ├── PhysicsPropsPlugin.js │ ├── PixiPlugin.js │ ├── ScrambleTextPlugin.js │ ├── ScrollToPlugin.js │ ├── SplitText.js │ ├── TextPlugin.js │ ├── all.js │ ├── gsap-core.js │ ├── index.js │ └── utils │ │ ├── PathEditor.js │ │ ├── VelocityTracker.js │ │ ├── matrix.js │ │ ├── paths.js │ │ └── strings.js │ ├── types │ ├── animation.d.ts │ ├── css-plugin.d.ts │ ├── css-rule-plugin.d.ts │ ├── custom-bounce.d.ts │ ├── custom-ease.d.ts │ ├── custom-wiggle.d.ts │ ├── draggable.d.ts │ ├── draw-svg-plugin.d.ts │ ├── ease.d.ts │ ├── easel-plugin.d.ts │ ├── gs-dev-tools.d.ts │ ├── gsap-core.d.ts │ ├── gsap-plugins.d.ts │ ├── gsap-utils.d.ts │ ├── index.d.ts │ ├── inertia-plugin.d.ts │ ├── morph-svg-plugin.d.ts │ ├── motion-path-helper.d.ts │ ├── motion-path-plugin.d.ts │ ├── physics-2d-plugin.d.ts │ ├── physics-props-plugin.d.ts │ ├── pixi-plugin.d.ts │ ├── scramble-text-plugin.d.ts │ ├── scroll-to-plugin.d.ts │ ├── split-text.d.ts │ ├── text-plugin.d.ts │ ├── timeline.d.ts │ ├── tween.d.ts │ └── utils │ │ └── velocity-tracker.d.ts │ └── utils │ ├── PathEditor.js │ ├── VelocityTracker.js │ ├── matrix.js │ ├── paths.js │ └── strings.js ├── sanity.json ├── static ├── README.md ├── egg │ ├── head.jpg │ └── vid.mp4 ├── favicon.ico ├── icon.png ├── memer │ ├── boomer.jpg │ ├── coffee.jpg │ ├── covid.jpg │ ├── cuddle.jpg │ ├── finger.jpg │ ├── hair.jpg │ ├── hat.jpg │ └── rudolf.jpg └── mp3 │ └── click.mp3 ├── store ├── README.md ├── device.js ├── index.js └── navigation.js └── stylelint.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | '@nuxtjs', 12 | 'prettier', 13 | 'prettier/vue', 14 | 'plugin:prettier/recommended', 15 | 'plugin:nuxt/recommended' 16 | ], 17 | plugins: ['prettier'], 18 | // add your custom rules here 19 | rules: {} 20 | } 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F41E Eww, a bug!" 3 | about: Create a bug report to help improve egstad.com 4 | title: "\U0001F41E[BUG] - Enter title here..." 5 | labels: bug 6 | assignees: egstad 7 | --- 8 | 9 | ## 📝 Description 10 | 11 | _Tell me about this terrible, TERRIBLE bug that you saw._ 12 | 13 | ## 🔁 How to Reproduce 14 | 15 | _Re-trace your steps for a second. How can I find this nasty creepy-crawly?_ 16 | 17 | 1. Go to '...' 18 | 2. Click on '....' 19 | 3. Scroll down to '....' 20 | 4. See error 21 | 22 | ## 🕵🏾‍♂️ Expected Behavior 23 | 24 | _Ewwy gooey bugs aside, what did you expect to happen?_ 25 | 26 | ## 📸 Screenshots 27 | 28 | _If it's relevant, plz include a screnshot of the bug._ 29 | 30 | ## 👩🏼‍🔧 Device Information 31 | 32 | ### Desktop 33 | 34 | - OS: [e.g. iOS] 35 | - Browser [e.g. chrome, safari] 36 | - Version [e.g. 22] 37 | 38 | ### Smartphone 39 | 40 | - Device: [e.g. iPhone6] 41 | - OS: [e.g. iOS8.1] 42 | - Browser [e.g. stock browser, safari] 43 | - Version [e.g. 22] 44 | 45 | ## 💁🏽‍♂️ Additional context 46 | 47 | _Thanks for taking the time to report this little monster bug. Anything else you'd like to add?._ 48 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "\U0001F6A7 Feature request" 3 | about: Got an idea for how to improve the site? 4 | title: "\U0001F6A7 [FEAT] - Enter title here..." 5 | labels: enhancement 6 | assignees: egstad 7 | 8 | --- 9 | 10 | ## 🐞 Is your feature request related to a problem/bug? 11 | _Ex. I'm always frustrated when..._ 12 | 13 | ## 👍🏽 Describe the solution you'd like to see 14 | _Ex. I'd like an endless stream of gifs to appear on scroll..._ 15 | 16 | ## 📝 Additional context 17 | _Add any other context or screenshots about the feature request here._ 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | 92 | # Local Netlify folder 93 | .netlify 94 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v14.17.3 -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "arrowParens": "always", 4 | "singleQuote": true 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "cmake.configureOnOpen": true 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Egstad.com 2 | 3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/3d3781d3-44d8-45c6-a803-9ec91522cfe1/deploy-status)](https://app.netlify.com/sites/egstad-frontend/deploys) 4 | 5 | ## Build Setup 6 | 7 | ```bash 8 | # install dependencies 9 | $ npm install 10 | 11 | # switch to proper node version (requires nvm) 12 | $ nvm use 13 | 14 | # serve with hot reload at localhost:3000 15 | $ npm start 16 | 17 | # build for production and launch server 18 | $ npm run build 19 | 20 | # generate static project 21 | $ npm run generate 22 | ``` 23 | 24 | ## Technologies 25 | 26 | - [Nuxt.js](https://nuxtjs.org) on the front-end 27 | - [Sanity.io](https://www.sanity.io/docs) on the back-end 28 | - Continuous deployment via [Netlify](https://docs.netlify.com/) 29 | - Video CDN was created with [AWS](aws.amazon.com) S3 + Cloudfront 30 | 31 | ## App Events 32 | 33 | | Event Name | What's it do? | Explicitly called? | 34 | | ---------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------- | 35 | | `page::mounted` | Tells `$nuxt` app that `mounted()` has completed. | Yes! Add `this.$nuxt.$emit('page::mounted')` at the end of a page's `mounted()` lifecycle hook. | 36 | | `route::updated` | Informs the app that the user wants to change routes | No, defined once in `layouts/default.vue` | 37 | 38 | ## Typography 39 | 40 | All type on the Site should be fed through the `` component. This component is responsible for handling the size and style of all letterforms. The typographic scale across all sizes is generated mathmatically using pixel values. For `xx` machines and above, those absolute (`px`) values are converted to relative (`vw`) units and scale fluidly! 41 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /assets/fonts/EG-Metaphor-Sans.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/assets/fonts/EG-Metaphor-Sans.woff2 -------------------------------------------------------------------------------- /assets/fonts/System-85-Mono.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/assets/fonts/System-85-Mono.woff2 -------------------------------------------------------------------------------- /assets/js/mixins/RouteTransition.js: -------------------------------------------------------------------------------- 1 | import gsap from 'gsap' 2 | 3 | const tl = gsap.timeline() 4 | 5 | export const routeTransitionFade = { 6 | transition: { 7 | name: 'page', 8 | mode: 'out-in', 9 | css: false, 10 | beforeEnter(el) { 11 | if (this.$store.state.device.hideAnimations) return 12 | 13 | tl.set(el, { 14 | opacity: 0, 15 | y: 50 16 | }) 17 | }, 18 | enter(el, done) { 19 | if (this.$store.state.device.hideAnimations) done() 20 | 21 | let transOverCalled = false 22 | 23 | tl.to(el, { 24 | ease: 'expo.out', 25 | duration: 1, 26 | delay: 0.5, 27 | opacity: 1, 28 | y: 0, 29 | onUpdate: () => { 30 | // waiting until the end took too long, 31 | // this waits until animatino has hit 50% 32 | if (!transOverCalled && tl.progress() >= 0.5) { 33 | transOverCalled = true 34 | this.$store.commit('setIsTransitioning', false) 35 | } 36 | }, 37 | onComplete: () => { 38 | done() 39 | if (this.$store.state.menuIsOpen) { 40 | this.$store.commit('setMenuVisibility', false) 41 | } 42 | } 43 | }) 44 | }, 45 | // afterEnter() { 46 | // if (this.$store.state.isTransitioning) { 47 | // this.$store.commit('setIsTransitioning', false) 48 | // } 49 | // }, 50 | 51 | // beforeLeave() { 52 | // // this is set in Routes.js instead 53 | // if (!this.$store.state.isTransitioning) { 54 | // this.$store.commit('setIsTransitioning', true) 55 | // } 56 | // }, 57 | leave(el, done) { 58 | if (this.$store.state.device.hideAnimations) done() 59 | 60 | tl.to(el, { 61 | ease: 'Power2.easeIn', 62 | duration: 0.4, 63 | opacity: 0, 64 | y: 50, 65 | onComplete: done 66 | }) 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /assets/js/utils/Arrays.js: -------------------------------------------------------------------------------- 1 | const shuffle = (array) => { 2 | for (let i = array.length; i > 1; i--) { 3 | const r = Math.floor(Math.random() * i) 4 | const temp = array[r] 5 | array[r] = array[i - 1] 6 | array[i - 1] = temp 7 | } 8 | return array 9 | } 10 | 11 | export { shuffle } 12 | -------------------------------------------------------------------------------- /assets/js/utils/Color.js: -------------------------------------------------------------------------------- 1 | export const hexToRgb = (hex) => { 2 | const isFormatted = hex.length === 7 3 | const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) 4 | 5 | if (!isFormatted) { 6 | throw new Error('Hex value should be 7 chars long') 7 | } 8 | 9 | return result 10 | ? { 11 | r: parseInt(result[1], 16), 12 | g: parseInt(result[2], 16), 13 | b: parseInt(result[3], 16) 14 | } 15 | : null 16 | } 17 | -------------------------------------------------------------------------------- /assets/js/utils/PortableTextToPlainText.js: -------------------------------------------------------------------------------- 1 | function toPlainText(blocks = []) { 2 | return ( 3 | blocks 4 | // loop through each block 5 | .map((block) => { 6 | // if it's not a text block with children, 7 | // return nothing 8 | if (block._type !== 'block' || !block.children) { 9 | return '' 10 | } 11 | // loop through the children spans, and join the 12 | // text strings 13 | return block.children.map((child) => child.text).join('') 14 | }) 15 | // join the paragraphs leaving split by two linebreaks 16 | .join('\n\n') 17 | ) 18 | } 19 | 20 | export { toPlainText } 21 | -------------------------------------------------------------------------------- /assets/js/utils/Random.js: -------------------------------------------------------------------------------- 1 | const getRandomInt = (min, max) => { 2 | return Math.floor(Math.random() * max) + min 3 | } 4 | 5 | export { getRandomInt } 6 | -------------------------------------------------------------------------------- /assets/js/utils/SanityHSL.js: -------------------------------------------------------------------------------- 1 | const perc = (val) => { 2 | return Math.round(val * 100) 3 | } 4 | 5 | const hsla = (val) => { 6 | const h = `${Math.round(val.h)}` 7 | const s = `${perc(val.s)}%` 8 | const l = `${perc(val.l)}%` 9 | const a = `${perc(val.a)}%` 10 | return `hsla(${h}, ${s}, ${l}, ${a})` 11 | } 12 | 13 | // const hslaPrefixArray = (val, prefix) => { 14 | // const h = { [`--${prefix}H`]: `${Math.round(val.h)}` } 15 | // const s = { [`--${prefix}S`]: `${Math.round(val.s)}%` } 16 | // const l = { [`--${prefix}L`]: `${Math.round(val.l)}%` } 17 | // const a = { [`--${prefix}A`]: `${Math.round(val.a)}%` } 18 | 19 | // return [h, s, l, a] 20 | // } 21 | 22 | const hslaPrefixObject = (val, prefix, full) => { 23 | return { 24 | [`--${prefix}-h`]: `${Math.round(val.h)}`, 25 | [`--${prefix}-s`]: `${Math.round(val.s * 100)}%`, 26 | [`--${prefix}-l`]: `${Math.round(val.l * 100)}%`, 27 | [`--${prefix}-a`]: `${Math.round(val.a * 100)}%`, 28 | [`--${full}`]: `hsla(var(--${prefix}-h), var(--${prefix}-s), var(--${prefix}-l), var(--${prefix}-a))` 29 | } 30 | } 31 | 32 | const hslaBreak = (val) => { 33 | // remove 'hsla(' and ending ')' 34 | const string = val.substr(5).slice(0, -1) 35 | const hsla = string.split(', ') 36 | 37 | return hsla 38 | } 39 | 40 | export { perc, hsla, hslaBreak, hslaPrefixObject } 41 | -------------------------------------------------------------------------------- /assets/js/utils/Strings.js: -------------------------------------------------------------------------------- 1 | const toTitleCase = (str) => { 2 | str = str.toLowerCase().split(' ') 3 | for (let i = 0; i < str.length; i++) { 4 | str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1) 5 | } 6 | return str.join(' ') 7 | } 8 | 9 | export { toTitleCase } 10 | -------------------------------------------------------------------------------- /assets/js/utils/Viewport.js: -------------------------------------------------------------------------------- 1 | const isInViewport = (elem) => { 2 | const distance = elem.getBoundingClientRect() 3 | return ( 4 | distance.top >= 0 && 5 | distance.left >= 0 && 6 | distance.bottom <= 7 | (window.innerHeight || document.documentElement.clientHeight) && 8 | distance.right <= 9 | (window.innerWidth || document.documentElement.clientWidth) 10 | ) 11 | } 12 | 13 | export { isInViewport } 14 | -------------------------------------------------------------------------------- /assets/styles/_vars.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | $sm: 375px; 4 | $md: 500px; 5 | $lg: 700px; 6 | $xl: 1024px; 7 | $xx: 1300px; 8 | $mx: 1600px; 9 | $navBreakpoint: 1920px; 10 | 11 | .site { 12 | /* Easing Function */ 13 | --time: 600ms; 14 | --ease: cubic-bezier(0.455, 0.03, 0.515, 0.955); 15 | 16 | /* Breakpoints */ 17 | --sm: #{$sm}; 18 | --md: #{$md}; 19 | --lg: #{$lg}; 20 | --xl: #{$xl}; 21 | --xx: #{$xx}; 22 | } 23 | 24 | @mixin bp($size: $sm, $prop: min-width) { 25 | @media screen and ($prop: $size) { 26 | @content; 27 | } 28 | } 29 | 30 | @mixin transition() { 31 | @media screen and (prefers-reduced-motion: no-preference) { 32 | @content; 33 | } 34 | } 35 | 36 | @function px-from-percent($percentage, $width: 100) { 37 | @return ($percentage * 0.01) * $width; 38 | } 39 | 40 | @function strip-units($number) { 41 | @return math.div($number, $number * 0 + 1); 42 | } 43 | 44 | @function calc-vw($pixel, $container-size: 100) { 45 | @return math.div(strip-units($pixel), strip-units($container-size)) * 100 + 46 | 0vw; 47 | } 48 | 49 | @function calc-leading($leading-in-pixels, $type-size) { 50 | @return math.div(strip-units($leading-in-pixels), strip-units($type-size)); 51 | } 52 | 53 | // interpolates type size between min and max 54 | @mixin spacer($type, $min-font-size, $max-font-size) { 55 | & { 56 | #{$type}: $min-font-size; 57 | 58 | @media screen and (min-width: $sm) { 59 | #{$type}: calc( 60 | #{$min-font-size} + #{strip-units($max-font-size - $min-font-size)} * 61 | ((100vw - #{$sm}) / #{strip-units($lg - $sm)}) 62 | ); 63 | } 64 | 65 | @media screen and (min-width: $lg) { 66 | #{$type}: $max-font-size; 67 | } 68 | } 69 | } 70 | 71 | // baseline grid 72 | $baseline: 16px; 73 | 74 | @mixin fluidScale( 75 | $sizeInPixels, 76 | $baselineInPixels: $baseline, 77 | $breakpointInPixels: $mx 78 | ) { 79 | font-size: $sizeInPixels; 80 | line-height: $baselineInPixels; 81 | font-feature-settings: 'ss04', 'ss05', 'ss06', 'ss07'; 82 | 83 | @media (min-width: $breakpointInPixels) { 84 | font-size: calc-vw($sizeInPixels, $breakpointInPixels); 85 | line-height: calc-leading($baselineInPixels, $sizeInPixels); 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /assets/styles/reset.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | div, 4 | span, 5 | applet, 6 | object, 7 | iframe, 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6, 14 | p, 15 | blockquote, 16 | pre, 17 | a, 18 | abbr, 19 | acronym, 20 | address, 21 | big, 22 | cite, 23 | code, 24 | del, 25 | dfn, 26 | em, 27 | img, 28 | ins, 29 | kbd, 30 | q, 31 | s, 32 | samp, 33 | small, 34 | strike, 35 | strong, 36 | sub, 37 | sup, 38 | tt, 39 | var, 40 | b, 41 | u, 42 | i, 43 | center, 44 | dl, 45 | dt, 46 | dd, 47 | ol, 48 | ul, 49 | li, 50 | fieldset, 51 | form, 52 | label, 53 | legend, 54 | table, 55 | caption, 56 | tbody, 57 | tfoot, 58 | thead, 59 | tr, 60 | th, 61 | td, 62 | article, 63 | aside, 64 | canvas, 65 | details, 66 | embed, 67 | figure, 68 | figcaption, 69 | footer, 70 | header, 71 | hgroup, 72 | menu, 73 | nav, 74 | output, 75 | ruby, 76 | section, 77 | summary, 78 | time, 79 | mark, 80 | audio, 81 | video { 82 | margin: 0; 83 | padding: 0; 84 | border: 0; 85 | font-size: 100%; 86 | font: inherit; 87 | vertical-align: baseline; 88 | } 89 | 90 | /* HTML5 display-role reset for older browsers */ 91 | article, 92 | aside, 93 | details, 94 | figcaption, 95 | figure, 96 | footer, 97 | header, 98 | hgroup, 99 | menu, 100 | nav, 101 | section { 102 | display: block; 103 | } 104 | 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | 110 | blockquote, 111 | q { 112 | quotes: none; 113 | } 114 | 115 | blockquote:before, 116 | blockquote:after, 117 | q:before, 118 | q:after { 119 | content: ''; 120 | content: none; 121 | } 122 | 123 | table { 124 | border-collapse: collapse; 125 | border-spacing: 0; 126 | } 127 | 128 | /* ========================================================================== 129 | My stuff 130 | ========================================================================== */ 131 | 132 | * { 133 | -webkit-tap-highlight-color: transparent; 134 | -webkit-touch-callout: none; 135 | -webkit-font-smoothing: antialiased; 136 | -moz-osx-font-smoothing: grayscale; 137 | font-feature-settings: 'kern' 1, 'pnum' 1, 'liga' 1; 138 | font-kerning: normal; 139 | font-synthesis: none; 140 | box-sizing: border-box; 141 | } 142 | 143 | *::before, 144 | *::after { 145 | box-sizing: border-box; 146 | } 147 | 148 | html, 149 | body, 150 | #__nuxt, 151 | #__layout, 152 | .site-wrapper, 153 | .site-content { 154 | min-height: 100%; 155 | /* height: 100vh; */ 156 | margin: 0; 157 | } 158 | 159 | html { 160 | -webkit-overflow-scrolling: touch; 161 | overflow-x: hidden; 162 | overflow-y: scroll; 163 | position: relative; 164 | scroll-behavior: smooth; 165 | } 166 | 167 | hr { 168 | display: block; 169 | width: 100%; 170 | margin: 0; 171 | border: 0; 172 | border-bottom: 1px solid var(--foreground); 173 | } 174 | -------------------------------------------------------------------------------- /assets/styles/typography.scss: -------------------------------------------------------------------------------- 1 | /*----------------------------------------------------------------------------- 2 | | Typography.scss 3 | *----------------------------------------------------------------------------- 4 | | Globally available typographic helper classes 5 | *---------------------------------------------------------------------------*/ 6 | 7 | .t-1 { 8 | @include fluidScale(12px, $baseline); 9 | font-family: var(--sans); 10 | font-variation-settings: 'wght' 450; 11 | letter-spacing: 0.02em; 12 | } 13 | 14 | .t-2 { 15 | font-family: var(--sans); 16 | @include fluidScale(15px, $baseline * 1.25); 17 | font-variation-settings: 'wght' 500; 18 | } 19 | 20 | .t-3 { 21 | font-family: var(--sans); 22 | @include fluidScale(28px, $baseline * 2); 23 | letter-spacing: 0.01em; 24 | } 25 | 26 | .t-mono { 27 | font-family: 'System85'; 28 | letter-spacing: 0.1em; 29 | } 30 | 31 | .t-center { 32 | text-align: center; 33 | } 34 | 35 | @font-face { 36 | font-family: 'EG Metaphor'; 37 | font-style: normal; 38 | font-display: swap; 39 | src: url('~assets/fonts/EG-Metaphor-Sans.woff2') format('woff2'); 40 | } 41 | 42 | @font-face { 43 | font-family: 'System85'; 44 | font-style: normal; 45 | font-display: swap; 46 | src: url('~assets/fonts/System-85-Mono.woff2') format('woff2'); 47 | } 48 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ 8 | -------------------------------------------------------------------------------- /components/atoms/Copy/CopyCode.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /components/atoms/Copy/CopyHighlight.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | -------------------------------------------------------------------------------- /components/atoms/Copy/CopyLink.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 42 | 43 | 62 | -------------------------------------------------------------------------------- /components/atoms/Copy/CopyLinkInternal.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 40 | 41 | 58 | -------------------------------------------------------------------------------- /components/atoms/Copy/CopyUnderline.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /components/atoms/Fab.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 33 | 34 | 133 | -------------------------------------------------------------------------------- /components/atoms/Grid.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 134 | 135 | 168 | -------------------------------------------------------------------------------- /components/atoms/GridColumn.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 172 | 173 | 179 | -------------------------------------------------------------------------------- /components/atoms/Icons/IconArrowUp.vue: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /components/atoms/Icons/IconArrows.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 32 | -------------------------------------------------------------------------------- /components/atoms/Icons/IconEllipsis.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /components/atoms/Icons/IconPlay.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /components/atoms/Icons/IconStop.vue: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /components/atoms/LazyTime.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 80 | 81 | 137 | -------------------------------------------------------------------------------- /components/atoms/Pic.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 109 | 110 | 123 | -------------------------------------------------------------------------------- /components/atoms/PicSVG.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 30 | -------------------------------------------------------------------------------- /components/atoms/Theme.vue: -------------------------------------------------------------------------------- 1 | 20 | 29 | 30 | 58 | 59 | 67 | -------------------------------------------------------------------------------- /components/atoms/Tooltip.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 41 | 42 | 118 | -------------------------------------------------------------------------------- /components/atoms/Type.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | 85 | -------------------------------------------------------------------------------- /components/organisms/Copy.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 11 | 12 | 69 | 70 | 124 | -------------------------------------------------------------------------------- /components/organisms/canvas/BlockMoodboardFileUploader.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 99 | 100 | 152 | -------------------------------------------------------------------------------- /components/organisms/pages/homepage/Bio.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 87 | 88 | 166 | -------------------------------------------------------------------------------- /components/organisms/pages/homepage/Details.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 47 | 48 | 99 | -------------------------------------------------------------------------------- /components/organisms/site-footer/SiteFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | 16 | -------------------------------------------------------------------------------- /components/organisms/site-header/SiteHeaderMeta.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 78 | 79 | 135 | -------------------------------------------------------------------------------- /components/templates/Debug.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 77 | -------------------------------------------------------------------------------- /components/templates/Pieces.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 42 | 43 | 60 | -------------------------------------------------------------------------------- /components/templates/Slices.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | 75 | -------------------------------------------------------------------------------- /docs/pull_request_template.md: -------------------------------------------------------------------------------- 1 | # Pull Request Title 2 | 3 | ## Description 4 | 5 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. 6 | 7 | ## Type of change 8 | 9 | _Please delete options that are not relevant._ 10 | 11 | - [ ] 🐞 **Bug Fix** _(non-breaking change which fixes an issue)_ 12 | - [ ] 🎉 **New Feature** _(non-breaking change which adds functionality)_ 13 | - [ ] 🚨 **Breaking change** _(fix or feature that causes existing functionality to not work as expected)_ 14 | - [ ] 📝 **This change requires a documentation update** 15 | 16 | ## Additional Information 17 | 18 | ## Screenshots 19 | 20 | Original | Updated 21 | :----------------------:|:----------------------: 22 | **original screenshot** | **updated screenshot**| 23 | 24 | 25 | ## Checklist 26 | 27 | - [ ] I didn't half-ass these updates and feel proud of my work 28 | - [ ] Code has been commented for clarity, particularly in hard-to-understand areas 29 | - [ ] I have made corresponding changes to the documentation 30 | - [ ] My changes generate no new warnings 31 | - [ ] I had so much fun that it hurt a lil. 32 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | // This file indicates that the directory is the root of a JavaScript Project. 2 | { 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "~/*": ["./*"], 7 | "@/*": ["./*"], 8 | "~~/*": ["./*"], 9 | "@@/*": ["./*"] 10 | } 11 | }, 12 | "exclude": ["node_modules", ".nuxt", "dist"] 13 | } 14 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /layouts/error.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 37 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/is/:splat" 3 | to = "/is/?a=:splat" 4 | status = 301 -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | target: 'static', 3 | // server: { 4 | // host: '0.0.0.0' 5 | // }, 6 | /* 7 | ** Headers of the page 8 | */ 9 | head: { 10 | title: 'Egstad', 11 | meta: [ 12 | // Basic metadata 13 | { charset: 'utf-8' }, 14 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 15 | { 16 | hid: 'apple-mobile-web-app-title', 17 | name: 'apple-mobile-web-app-title', 18 | content: 'Egstad' 19 | }, 20 | { 21 | hid: `og:site_name`, 22 | property: 'og:site_name', 23 | content: `Egstad` 24 | }, 25 | { 26 | hid: `twitter:card`, 27 | property: 'twitter:card', 28 | content: `summary_large_image` 29 | }, 30 | { 31 | hid: `twitter:site`, 32 | property: 'twitter:site', 33 | content: `@jordanegstad` 34 | }, 35 | { 36 | hid: `twitter:creator`, 37 | property: 'twitter:creator', 38 | content: `@jordanegstad` 39 | }, 40 | { 41 | hid: `twitter:title`, 42 | property: 'twitter:title', 43 | content: `Egstad` 44 | }, 45 | { 46 | hid: `twitter:description`, 47 | property: 'twitter:description', 48 | content: `Jordan Egstad is a graphic designer and web developer creating expressive and enduring brand identities and websites.` 49 | }, 50 | { 51 | hid: `twitter:image`, 52 | property: 'twitter:image', 53 | content: `https://cdn.sanity.io/images/sjl79kwi/production/baeaf1ae8651b1dd53b2885caf459c45556d9cb2-1080x720.jpg?rect=0,77,1080,564&w=1200&h=627&fit=clip&auto=format` 54 | }, 55 | { 56 | hid: `og:title`, 57 | property: 'og:title', 58 | content: `Egstad` 59 | }, 60 | { 61 | hid: 'description', 62 | name: 'description', 63 | content: `Jordan Egstad is a graphic designer and web developer creating expressive and enduring brand identities and websites.` 64 | }, 65 | { 66 | hid: `og:description`, 67 | property: 'og:description', 68 | content: `Jordan Egstad is a graphic designer and web developer creating expressive and enduring brand identities and websites.` 69 | }, 70 | { 71 | hid: `og:image`, 72 | property: 'og:image', 73 | content: `https://cdn.sanity.io/images/sjl79kwi/production/baeaf1ae8651b1dd53b2885caf459c45556d9cb2-1080x720.jpg?rect=0,77,1080,564&w=1200&h=627&fit=clip&auto=format` 74 | } 75 | ], 76 | link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] 77 | }, 78 | /* 79 | ** Customize the progress-bar color 80 | */ 81 | loading: { 82 | color: 'var(--foreground)', 83 | continuous: true 84 | }, 85 | /* 86 | ** Global CSS 87 | */ 88 | css: ['~/assets/styles/reset.css'], 89 | /* 90 | ** Plugins to load before mounting the App 91 | */ 92 | plugins: [ 93 | { src: '~/plugins/PageMetadata.js' }, 94 | { src: '~/plugins/ThemeChanger.js' }, 95 | { src: '~/plugins/ThemeScroller.js' }, 96 | { src: '~/plugins/Device.client.js' }, 97 | { src: '~/plugins/Sanity.js' }, 98 | { src: '~/plugins/Routes.js' }, 99 | { src: '~/plugins/Grid.js' }, 100 | { src: '~/plugins/Type.js' }, 101 | { src: '~/plugins/VueSwipeEvents.client.js' }, 102 | { src: '~/plugins/IntersectionObserver.client.js' }, 103 | { src: '~/plugins/ViewportAnimations.client.js' } 104 | // { src: '~/plugins/Scroll.client.js' } 105 | ], 106 | /* 107 | ** Nuxt.js dev-modules 108 | */ 109 | buildModules: [ 110 | // Doc: https://github.com/nuxt-community/eslint-module 111 | '@nuxtjs/eslint-module', 112 | // Doc: https://github.com/nuxt-community/stylelint-module 113 | '@nuxtjs/stylelint-module', 114 | // Doc: https://github.com/nuxt-community/style-resources-module 115 | '@nuxtjs/style-resources', 116 | // Doc: https://google-analytics.nuxtjs.org/ 117 | '@nuxtjs/google-analytics' 118 | ], 119 | 120 | googleAnalytics: { 121 | id: 'UA-127604100-1' 122 | }, 123 | 124 | styleResources: { 125 | hoistUseStatements: true, 126 | scss: ['~/assets/styles/_vars.scss', '~/assets/styles/typography.scss'] 127 | }, 128 | /* 129 | ** Nuxt.js modules 130 | */ 131 | modules: ['@nuxtjs/pwa'], 132 | /* 133 | ** Build configuration 134 | */ 135 | build: { 136 | /* 137 | ** You can extend webpack config here 138 | */ 139 | extend(config, ctx) {}, 140 | transpile: [ 141 | 'gsap', 142 | 'three', 143 | 'three/examples/jsm/controls/OrbitControls', 144 | 'three/examples/jsm/lights/LightProbeGenerator' 145 | ] 146 | }, 147 | generate: { 148 | crawler: true, 149 | exclude: ['/is/*'] 150 | } 151 | } 152 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "egstad-dotcom", 3 | "version": "1.0.0", 4 | "description": "My little corner of the internet", 5 | "author": "Jordan Egstad", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore ." 13 | }, 14 | "engines": { 15 | "node": ">=14.0.0", 16 | "npm": ">=6.0.0" 17 | }, 18 | "dependencies": { 19 | "@egstad/detect-motion": "^1.0.4", 20 | "@egstad/detect-scroll": "^1.0.10", 21 | "@egstad/detect-theme": "^1.4.0", 22 | "@nuxtjs/google-analytics": "^2.4.0", 23 | "@nuxtjs/pwa": "^3.0.0-0", 24 | "@sanity/asset-utils": "^1.1.4", 25 | "@sanity/block-content-to-html": "^2.0.0", 26 | "@sanity/client": "^2.13.0", 27 | "dayjs": "^1.10.6", 28 | "flickity-fade": "^1.0.0", 29 | "gsap": "^3.6.1", 30 | "intersection-observer-admin": "^0.3.2", 31 | "nuxt": "^2.15.4", 32 | "sanity-blocks-vue-component": "^0.1.0", 33 | "three": "^0.131.3", 34 | "vue-flickity": "^1.2.1", 35 | "vue2-touch-events": "^3.2.2" 36 | }, 37 | "devDependencies": { 38 | "@nuxtjs/eslint-config": "^5.0.0", 39 | "@nuxtjs/eslint-module": "^3.0.2", 40 | "@nuxtjs/style-resources": "^1.2.0", 41 | "@nuxtjs/stylelint-module": "^3.1.0", 42 | "babel-eslint": "^10.0.1", 43 | "eslint": "^7.24.0", 44 | "eslint-config-prettier": "^6.10.0", 45 | "eslint-plugin-nuxt": ">=0.4.2", 46 | "eslint-plugin-prettier": "^3.4.0", 47 | "fibers": "^5.0.0", 48 | "prettier": "^1.19.1", 49 | "sass": "^1.36.0", 50 | "sass-loader": "^10.2.0", 51 | "stylelint": "^13.12.0", 52 | "typescript": "^4.3.5" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/_id.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 77 | 78 | 83 | -------------------------------------------------------------------------------- /pages/canvas/index.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 80 | 81 | 152 | -------------------------------------------------------------------------------- /pages/canvas/moodboard.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | -------------------------------------------------------------------------------- /pages/grid.vue: -------------------------------------------------------------------------------- 1 | 104 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 118 | 119 | 127 | -------------------------------------------------------------------------------- /pages/logs/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | 20 | 25 | -------------------------------------------------------------------------------- /pages/test.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /pages/work/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 136 | 137 | 149 | -------------------------------------------------------------------------------- /plugins/Device.client.js: -------------------------------------------------------------------------------- 1 | import deviceInfo from '~/plugins/device/DeviceInfo' 2 | import windowResize from '~/plugins/device/WindowResize' 3 | import windowDimensions from '~/plugins/device/WindowDimensions' 4 | import windowBreakpoints from '~/plugins/device/WindowBreakpoints' 5 | import windowScroll from '~/plugins/device/WindowScroll' 6 | import preferredTheme from '~/plugins/device/PreferredTheme' 7 | import preferredMotion from '~/plugins/device/PreferredMotion' 8 | 9 | const device = { 10 | init() { 11 | deviceInfo.init() 12 | preferredTheme.init() 13 | preferredMotion.init() 14 | windowResize.init() 15 | windowDimensions.init() 16 | windowBreakpoints.init() 17 | windowScroll.init() 18 | // this.scrollHistory() 19 | }, 20 | 21 | setDeviceClasses() { 22 | // touch support 23 | if (this.isTouch) { 24 | document.documentElement.classList.add('device-is-touch') 25 | } 26 | 27 | // cursor support 28 | if (this.isCursor) { 29 | document.documentElement.classList.add('device-is-pointer') 30 | } 31 | 32 | // mobile device 33 | if (this.isMobile) { 34 | document.documentElement.classList.add('device-is-mobile') 35 | } 36 | }, 37 | 38 | // sets scroll restoration to manual from auto 39 | // this is so that the browser doesn't jump the gun and 40 | // change scroll position before the route has completed 41 | scrollHistory() { 42 | if ('scrollRestoration' in history) { 43 | history.scrollRestoration = 'manual' 44 | } 45 | } 46 | } 47 | 48 | if (process.browser) { 49 | window.onNuxtReady((app) => { 50 | // run all of the above 51 | device.init() 52 | // tell nuxt that we're ready to rock 53 | window.$nuxt.$emit('device::initialized') 54 | }) 55 | } 56 | 57 | export default device 58 | -------------------------------------------------------------------------------- /plugins/Grid.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Grid from '@/components/atoms/Grid' 3 | import Column from '@/components/atoms/GridColumn' 4 | 5 | const components = { Grid, Column } 6 | 7 | Object.entries(components).forEach(([name, component]) => { 8 | Vue.component(name, component) 9 | }) 10 | -------------------------------------------------------------------------------- /plugins/IntersectionObserver.client.js: -------------------------------------------------------------------------------- 1 | import IntersectionObserverAdmin from 'intersection-observer-admin' 2 | 3 | window.$observer = new IntersectionObserverAdmin() 4 | 5 | if (process.browser) { 6 | window.onNuxtReady((app) => { 7 | // garbage collect between routes 8 | window.$nuxt.$on('route::updated', () => { 9 | window.$observer.destroy() 10 | window.$observer = new IntersectionObserverAdmin() 11 | }) 12 | }) 13 | } 14 | -------------------------------------------------------------------------------- /plugins/PageMetadata.js: -------------------------------------------------------------------------------- 1 | import { getImageAsset } from '@sanity/asset-utils' 2 | 3 | export default ({ app }, inject) => { 4 | inject('setPageMetadata', (payload) => { 5 | const pageMeta = [] 6 | const pageImage = payload.socialImage 7 | const pageDesc = payload.socialDescription 8 | const pageTitle = payload.socialTitle 9 | ? `Egstad • ${payload.socialTitle}` 10 | : `Egstad • ${payload.title}` 11 | 12 | if (payload === undefined) { 13 | return 14 | } 15 | 16 | // If social title is created 17 | if (payload.socialTitle) { 18 | pageMeta.push({ 19 | hid: `og:title`, 20 | property: 'og:title', 21 | content: pageTitle 22 | }) 23 | 24 | pageMeta.push({ 25 | hid: `twitter:title`, 26 | property: 'twitter:title', 27 | content: pageTitle 28 | }) 29 | } 30 | 31 | // Description for social 32 | if (pageDesc) { 33 | pageMeta.push({ 34 | hid: `description`, 35 | property: 'description', 36 | content: pageDesc 37 | }) 38 | 39 | pageMeta.push({ 40 | hid: `og:description`, 41 | property: 'og:description', 42 | content: pageDesc 43 | }) 44 | 45 | pageMeta.push({ 46 | hid: `twitter:description`, 47 | property: 'twitter:description', 48 | content: pageDesc 49 | }) 50 | } 51 | 52 | // Image for social 53 | if (pageImage) { 54 | const imageAsset = getImageAsset(pageImage, { 55 | projectId: app.$sanityClient.clientConfig.projectId, 56 | dataset: app.$sanityClient.clientConfig.dataset 57 | }) 58 | const croppedImage = `${imageAsset.url}?w=1200&height=627&auto=format&fit=clip` 59 | 60 | pageMeta.push({ 61 | hid: `og:image`, 62 | property: 'og:image', 63 | content: croppedImage 64 | }) 65 | 66 | pageMeta.push({ 67 | hid: `twitter:image`, 68 | property: 'twitter:image', 69 | content: croppedImage 70 | }) 71 | } 72 | 73 | return { 74 | title: pageTitle, 75 | meta: [...pageMeta] 76 | } 77 | }) 78 | } 79 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /plugins/Routes.js: -------------------------------------------------------------------------------- 1 | export default ({ app }) => { 2 | /** 3 | * Before each route begins... 4 | */ 5 | app.router.beforeEach(async (to, from, next) => { 6 | updateStoreBeforeRouteChanges(to) 7 | await waitForHeaderTransitionToComplete(to) 8 | beginPageTransition() 9 | next() 10 | }) 11 | 12 | /** 13 | * Check if the user prefers to not have transitions 14 | * @returns {boolean} 15 | */ 16 | const reduceMotion = () => { 17 | return app.store.state.device.hideAnimations 18 | } 19 | 20 | /** 21 | * Update all abacus links before transition begins. 22 | * If motion is enabled, wait for header transition to complete 23 | * @param {object} nextRoute 24 | */ 25 | const waitForHeaderTransitionToComplete = async (nextRoute) => { 26 | await app.store.commit('setActiveNavigationRoute', nextRoute.path) 27 | 28 | if (reduceMotion) { 29 | await new Promise((resolve) => setTimeout(resolve, getDelayDuration())) 30 | } 31 | } 32 | 33 | /** 34 | * Fetch the site navigation's transition duration 35 | * @returns {number} 36 | */ 37 | const getDelayDuration = () => { 38 | if (process.server) return 39 | return parseFloat( 40 | getComputedStyle(document.querySelector('.site')).getPropertyValue( 41 | '--trans-short' 42 | ) 43 | ) 44 | } 45 | 46 | /** 47 | * Notify the store that the app is beginning to transition 48 | */ 49 | const beginPageTransition = async () => { 50 | await app.store.commit('setIsTransitioning', true) 51 | } 52 | 53 | /** 54 | * Update the store before route changes 55 | * @param {object} nextRoute 56 | */ 57 | const updateStoreBeforeRouteChanges = (nextRoute) => { 58 | // if (nextRoute.name === 'work') { 59 | // app.store.commit('setFilterVisibility', true) 60 | // } else { 61 | // app.store.commit('setFilterVisibility', false) 62 | // } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /plugins/Sanity.js: -------------------------------------------------------------------------------- 1 | import sanityClient from '@sanity/client' 2 | 3 | const sanity = sanityClient({ 4 | projectId: 'sjl79kwi', 5 | dataset: 'production', 6 | apiVersion: `v${new Date().toISOString().split('T')[0]}`, 7 | useCdn: process.env.NODE_ENV === 'production' 8 | }) 9 | 10 | export default ({ app, store }, inject) => { 11 | inject('sanityClient', sanity) 12 | } 13 | -------------------------------------------------------------------------------- /plugins/Scroll.client.js: -------------------------------------------------------------------------------- 1 | export default (context, inject) => { 2 | let posY = null 3 | 4 | const watchScrollPosition = () => { 5 | const y = getY() 6 | // const scrolling = y !== posY 7 | // const scrollingUp = y < posY 8 | // const scrollingDown = y > posY 9 | const atEnd = y !== posY && isMaxY() 10 | const atStart = y !== posY && isMinY() 11 | 12 | posY = y 13 | 14 | // if (scrolling) { 15 | // switch (true) { 16 | // case scrollingDown: 17 | // console.log('down') 18 | // break 19 | 20 | // case scrollingUp: 21 | // console.log('up') 22 | // break 23 | 24 | // default: 25 | // break 26 | // } 27 | // } 28 | 29 | if (posY) console.log('y', posY) 30 | if (atStart) console.log('start') 31 | if (atEnd) console.log('end') 32 | } 33 | 34 | const isMaxY = () => { 35 | return getY() >= getYMax() 36 | } 37 | 38 | const isMinY = () => { 39 | return getY() <= 0 40 | } 41 | 42 | const getYMax = () => { 43 | let max = null 44 | 45 | max = Math.max( 46 | document.body.scrollHeight, 47 | document.documentElement.scrollHeight, 48 | document.body.offsetHeight, 49 | document.documentElement.offsetHeight, 50 | document.documentElement.clientHeight 51 | ) 52 | 53 | return max - window.innerHeight 54 | } 55 | 56 | const getY = () => { 57 | return window.pageYOffset 58 | } 59 | 60 | const scrollHandler = (ev) => { 61 | window.requestAnimationFrame(watchScrollPosition) 62 | } 63 | 64 | window.addEventListener('scroll', scrollHandler, { passive: true }) 65 | } 66 | -------------------------------------------------------------------------------- /plugins/ThemeChanger.js: -------------------------------------------------------------------------------- 1 | import { hslaPrefixObject } from '@/assets/js/utils/SanityHSL' 2 | 3 | const theme = { 4 | filterObjectByKey(array, allowedKeys) { 5 | return Object.keys(array) 6 | .filter((key) => allowedKeys.includes(key)) 7 | .reduce((obj, key) => { 8 | obj[key] = array[key] 9 | return obj 10 | }, {}) 11 | }, 12 | addCSSVarPrefix(object, prefix) { 13 | const arr = [] 14 | 15 | Object.keys(object).forEach((key, index) => { 16 | arr.push({ key: object }) 17 | // console.log(key, object) 18 | // key: the name of the object key 19 | // index: the ordinal position of the key within the object 20 | }) 21 | 22 | console.log(arr) 23 | 24 | // // for (const [key, value] of Object.entries(object)) { 25 | // // newArr.push(`--${prefix}${key.toUpperCase()}: ${value}`) 26 | // // } 27 | 28 | // return newArr 29 | }, 30 | set(colors) { 31 | let theme = colors 32 | if (typeof colors === 'string') theme = this.getDefaultTheme(colors) 33 | 34 | const allowedKeys = ['h', 's', 'l', 'a'] 35 | 36 | // sanitize objects 37 | const background = this.filterObjectByKey(theme.background, allowedKeys) 38 | const foreground = this.filterObjectByKey(theme.foreground, allowedKeys) 39 | const accent = this.filterObjectByKey(theme.accent, allowedKeys) 40 | 41 | // add css prefixes to object keys 42 | const bHSLA = hslaPrefixObject(background, 'b', 'background') 43 | const fHSLA = hslaPrefixObject(foreground, 'f', 'foreground') 44 | const aHSLA = hslaPrefixObject(accent, 'a', 'accent') 45 | 46 | return { 47 | ...bHSLA, 48 | ...fHSLA, 49 | ...aHSLA 50 | } 51 | }, 52 | getDefaultTheme(colors) { 53 | let theme 54 | 55 | switch (colors) { 56 | case 'dark': 57 | theme = { 58 | background: { 59 | h: 0, 60 | s: 0, 61 | l: 0, 62 | a: 1 63 | }, 64 | foreground: { 65 | h: 44, 66 | s: 0.15, 67 | l: 0.87, 68 | a: 1 69 | }, 70 | accent: { 71 | h: 242, 72 | s: 0.39, 73 | l: 0.6, 74 | a: 1 75 | } 76 | } 77 | break 78 | case 'light': 79 | theme = { 80 | background: { 81 | h: 0, 82 | s: 0, 83 | l: 100, 84 | a: 1 85 | }, 86 | foreground: { 87 | h: 44, 88 | s: 0.08, 89 | l: 0.16, 90 | a: 1 91 | }, 92 | accent: { 93 | h: 242, 94 | s: 0.39, 95 | l: 0.77, 96 | a: 1 97 | } 98 | } 99 | break 100 | default: 101 | console.error( 102 | 'ThemeChanger error: This is not a registered default theme.' 103 | ) 104 | break 105 | } 106 | 107 | return theme 108 | } 109 | } 110 | 111 | export default theme 112 | -------------------------------------------------------------------------------- /plugins/Type.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Type from '@/components/atoms/Type' 3 | 4 | const components = { Type } 5 | 6 | Object.entries(components).forEach(([name, component]) => { 7 | Vue.component(name, component) 8 | }) 9 | -------------------------------------------------------------------------------- /plugins/ViewportAnimations.client.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | Vue.directive('animate', { 4 | /** 5 | * INSERTED 6 | * Runs when When the bound element is inserted into the DOM 7 | * @param {HTMLElement} el The element the directive is bound to. This can be used to directly manipulate the DOM. 8 | * @param {Object} binding An object containing the following properties. 9 | * @param {Object} vnode The virtual node produced by Vue’s compiler. 10 | */ 11 | inserted: (el, binding, vnode) => { 12 | el.options = { rootMargin: '0px 0px 0px 0px', threshold: 0 } 13 | el.modifiers = binding.modifiers 14 | el.classes = { 15 | here: 'is-here', 16 | above: 'is-above', 17 | below: 'is-below' 18 | } 19 | 20 | /** 21 | * Enter Viewport callback 22 | * @param {intersectionOberver} IntersectionObserverAdmin instance 23 | */ 24 | const onEnter = (instance) => { 25 | instance.target.classList.add(el.classes.here) 26 | instance.target.classList.remove(el.classes.above, el.classes.below) 27 | 28 | // unobserve if once modifier is defined 29 | if (el.modifiers.once) window.$observer.unobserve(el, el.options) 30 | } 31 | 32 | /** 33 | * Exit Viewport callback 34 | * @param {intersectionOberver} IntersectionObserverAdmin instance 35 | */ 36 | const onExit = (instance) => { 37 | const isAbove = instance.rootBounds.top > instance.boundingClientRect.top 38 | // const isBelow = instance.rootBounds.top < instance.boundingClientRect.top 39 | 40 | if (isAbove) { 41 | instance.target.classList.add(el.classes.above) 42 | instance.target.classList.remove(el.classes.below, el.classes.here) 43 | } else { 44 | instance.target.classList.add(el.classes.below) 45 | instance.target.classList.remove(el.classes.above, el.classes.here) 46 | } 47 | } 48 | 49 | window.$observer.addEnterCallback(el, onEnter) 50 | window.$observer.addExitCallback(el, onExit) 51 | window.$observer.observe(el, el.options) 52 | }, 53 | /** 54 | * UNBIND 55 | * Called only once, when the directive is unbound from the element. 56 | * @param {HTMLElement} el The element the directive is bound to. This can be used to directly manipulate the DOM. 57 | * @param {Object} binding An object containing the following properties. 58 | * @param {Object} vnode The virtual node produced by Vue’s compiler. 59 | */ 60 | unbind: (el, binding, vnode) => { 61 | window.$observer.unobserve(el, el.options) 62 | } 63 | }) 64 | -------------------------------------------------------------------------------- /plugins/VueSwipeEvents.client.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vue2TouchEvents from 'vue2-touch-events' 3 | 4 | Vue.use(Vue2TouchEvents) 5 | -------------------------------------------------------------------------------- /plugins/device/DeviceInfo.js: -------------------------------------------------------------------------------- 1 | const deviceInfo = { 2 | init() { 3 | this.set() 4 | 5 | window.$nuxt.$on('window::resize', () => { 6 | this.set() 7 | }) 8 | }, 9 | get() { 10 | return { 11 | isTouch: 'ontouchstart' in window || matchMedia('(hover: none)').matches, 12 | isCursor: 'onmousedown' in document.documentElement, 13 | dpi: window.devicePixelRatio, 14 | isMobile: /Android|BlackBerry|iPhone|iPad|iPod|IEMobile|Opera Mini/gi.test( 15 | window.navigator.userAgent 16 | ) 17 | } 18 | }, 19 | set() { 20 | window.$nuxt.$store.commit('device/setDevice', this.get()) 21 | } 22 | } 23 | 24 | export default deviceInfo 25 | -------------------------------------------------------------------------------- /plugins/device/PreferredMotion.js: -------------------------------------------------------------------------------- 1 | // Detect Motion https://www.npmjs.com/package/@egstad/detect-motion 2 | import detectMotion from '@egstad/detect-motion' 3 | 4 | const preferredTheme = { 5 | init() { 6 | // watch for `reducedMotionUpdated` events 7 | window.addEventListener('reducedMotionUpdated', this.setPreference) 8 | 9 | // fetch current pref, dispatch via 'reducedMotionUpdated', watch for changes 10 | detectMotion.watch() 11 | }, 12 | setPreference(ev) { 13 | window.$nuxt.$store.commit( 14 | 'device/setPrefersReducedMotion', 15 | ev.detail.reduce 16 | ) 17 | } 18 | } 19 | 20 | export default preferredTheme 21 | -------------------------------------------------------------------------------- /plugins/device/PreferredTheme.js: -------------------------------------------------------------------------------- 1 | // Detect theme: https://www.npmjs.com/package/@egstad/detect-theme 2 | import detectTheme from '@egstad/detect-theme' 3 | 4 | const preferredTheme = { 5 | init() { 6 | // watch for `colorSchemeUpdated` events 7 | window.addEventListener('colorSchemeUpdated', this.setPreference) 8 | 9 | // fetch preferred theme via 'colorSchemeUpdated' then watch for changes 10 | detectTheme.watch() 11 | }, 12 | setPreference(ev) { 13 | window.$nuxt.$store.commit('device/setPreferredTheme', ev.detail.theme) 14 | } 15 | } 16 | 17 | export default preferredTheme 18 | -------------------------------------------------------------------------------- /plugins/device/WindowBreakpoints.js: -------------------------------------------------------------------------------- 1 | const windowBreakpoints = { 2 | init() { 3 | this.set() 4 | }, 5 | set() { 6 | const width = window.$nuxt.$store.state.device.winWidth 7 | const currentBreakpoint = window.$nuxt.$store.state.device.breakpoint 8 | let breakpoint = '' 9 | 10 | switch (true) { 11 | case width < this.getBreakpoint('sm'): 12 | breakpoint = 'xs' 13 | break 14 | case width < this.getBreakpoint('md'): 15 | breakpoint = 'sm' 16 | break 17 | case width < this.getBreakpoint('lg'): 18 | breakpoint = 'md' 19 | break 20 | case width < this.getBreakpoint('xl'): 21 | breakpoint = 'lg' 22 | break 23 | case width < this.getBreakpoint('xx'): 24 | breakpoint = 'xl' 25 | break 26 | default: 27 | breakpoint = 'xx' 28 | break 29 | } 30 | 31 | if (breakpoint !== currentBreakpoint) { 32 | window.$nuxt.$store.commit('device/setBreakpoint', breakpoint) 33 | } 34 | }, 35 | getBreakpoint(size) { 36 | if (process.client) { 37 | return getComputedStyle(document.querySelector('.site')) 38 | .getPropertyValue(`--${size}`) 39 | .replace('px', '') 40 | } 41 | } 42 | } 43 | 44 | export default windowBreakpoints 45 | -------------------------------------------------------------------------------- /plugins/device/WindowDimensions.js: -------------------------------------------------------------------------------- 1 | const windowDimensions = { 2 | init() { 3 | this.set() 4 | 5 | // page::mounted should exist on every page within the mounted() lifecycle hook 6 | window.$nuxt.$on('page::mounted', () => { 7 | windowDimensions.set() 8 | }) 9 | 10 | window.$nuxt.$on('window::scrollStop', () => { 11 | windowDimensions.set() 12 | }) 13 | }, 14 | get() { 15 | return { 16 | winWidth: window.innerWidth, 17 | winHeight: window.innerHeight, 18 | docHeight: document.body.scrollHeight, 19 | docWidth: document.body.scrollWidth 20 | } 21 | }, 22 | set() { 23 | window.$nuxt.$store.commit('device/setDimensions', this.get()) 24 | } 25 | } 26 | 27 | export default windowDimensions 28 | -------------------------------------------------------------------------------- /plugins/device/WindowResize.js: -------------------------------------------------------------------------------- 1 | import windowDimensions from '~/plugins/device/WindowDimensions' 2 | import windowBreakpoints from '~/plugins/device/WindowBreakpoints' 3 | 4 | const windowResize = { 5 | init() { 6 | this.resizeHandler = this.throttleResize.bind(this) 7 | this.timeout = false 8 | this.delay = 200 9 | 10 | window.addEventListener('resize', this.resizeHandler) 11 | }, 12 | throttleResize() { 13 | clearTimeout(this.timeout) 14 | 15 | this.timeout = setTimeout(() => { 16 | windowDimensions.set() 17 | windowBreakpoints.set() 18 | window.$nuxt.$emit('window::resize') 19 | }, this.delay) 20 | } 21 | } 22 | 23 | export default windowResize 24 | -------------------------------------------------------------------------------- /plugins/device/WindowScroll.js: -------------------------------------------------------------------------------- 1 | import DetectScroll from '@egstad/detect-scroll' 2 | 3 | const scroll = { 4 | init() { 5 | this.store = window.$nuxt.$store 6 | this.scrollUp = this.scrollUp.bind(this) 7 | this.scrollDown = this.scrollDown.bind(this) 8 | this.scrollStop = this.scrollStop.bind(this) 9 | window.detectScroll = new DetectScroll(window, { 10 | // debugMode: true, 11 | horizontal: false, 12 | vertical: true, 13 | events: { 14 | scrollY: this.scrollY, 15 | scrollUp: this.scrollUp, 16 | scrollDown: this.scrollDown, 17 | scrollStart: this.scrollStart, 18 | scrollStop: this.scrollStop, 19 | scrollMinY: this.scrollMinY, 20 | scrollMaxY: this.scrollMaxY 21 | } 22 | }) 23 | }, 24 | scrollY(ev) { 25 | const y = ev.detail.y 26 | const h = document.documentElement.scrollHeight 27 | const w = this.$nuxt.$store.state.device.winHeight 28 | const o = w + w 29 | 30 | // if near bottom 31 | if (y + w + o > h) { 32 | window.$nuxt.$emit('window::scrollNearBottom') 33 | } 34 | window.$nuxt.$emit('window::scrollY') 35 | }, 36 | scrollUp(ev) { 37 | window.$nuxt.$emit('window::scrollUp', ev.detail.y) 38 | window.$nuxt.$store.dispatch('device/updateScrollDirection', 'up') 39 | }, 40 | scrollDown(ev) { 41 | window.$nuxt.$emit('window::scrollDown', ev.detail.y) 42 | window.$nuxt.$store.dispatch('device/updateScrollDirection', 'down') 43 | }, 44 | scrollStart() { 45 | window.$nuxt.$store.commit('device/setScrollingState', true) 46 | }, 47 | scrollStop(ev) { 48 | window.$nuxt.$emit('window::scrollStop', window.detectScroll.y) 49 | window.$nuxt.$store.commit('device/setScrollingState', false) 50 | }, 51 | destroy() { 52 | window.detectScroll.destroy() 53 | } 54 | } 55 | 56 | export default scroll 57 | -------------------------------------------------------------------------------- /plugins/gsap/CSSRulePlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * CSSRulePlugin 3.1.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | 11 | /* eslint-disable */ 12 | var gsap, 13 | _coreInitted, 14 | _win, 15 | _doc, 16 | CSSPlugin, 17 | _windowExists = function _windowExists() { 18 | return typeof window !== "undefined"; 19 | }, 20 | _getGSAP = function _getGSAP() { 21 | return gsap || _windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap; 22 | }, 23 | _checkRegister = function _checkRegister() { 24 | if (!_coreInitted) { 25 | _initCore(); 26 | 27 | if (!CSSPlugin) { 28 | console.warn("Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)"); 29 | } 30 | } 31 | 32 | return _coreInitted; 33 | }, 34 | _initCore = function _initCore(core) { 35 | gsap = core || _getGSAP(); 36 | 37 | if (_windowExists()) { 38 | _win = window; 39 | _doc = document; 40 | } 41 | 42 | if (gsap) { 43 | CSSPlugin = gsap.plugins.css; 44 | 45 | if (CSSPlugin) { 46 | _coreInitted = 1; 47 | } 48 | } 49 | }; 50 | 51 | export var CSSRulePlugin = { 52 | version: "3.1.1", 53 | name: "cssRule", 54 | init: function init(target, value, tween, index, targets) { 55 | if (!_checkRegister() || typeof target.cssText === "undefined") { 56 | return false; 57 | } 58 | 59 | var div = target._gsProxy = target._gsProxy || _doc.createElement("div"); 60 | 61 | this.ss = target; 62 | this.style = div.style; 63 | div.style.cssText = target.cssText; 64 | CSSPlugin.prototype.init.call(this, div, value, tween, index, targets); //we just offload all the work to the regular CSSPlugin and then copy the cssText back over to the rule in the render() method. This allows us to have all of the updates to CSSPlugin automatically flow through to CSSRulePlugin instead of having to maintain both 65 | }, 66 | render: function render(ratio, data) { 67 | var pt = data._pt, 68 | style = data.style, 69 | ss = data.ss, 70 | i; 71 | 72 | while (pt) { 73 | pt.r(ratio, pt.d); 74 | pt = pt._next; 75 | } 76 | 77 | i = style.length; 78 | 79 | while (--i > -1) { 80 | ss[style[i]] = style[style[i]]; 81 | } 82 | }, 83 | getRule: function getRule(selector) { 84 | _checkRegister(); 85 | 86 | var ruleProp = _doc.all ? "rules" : "cssRules", 87 | styleSheets = _doc.styleSheets, 88 | i = styleSheets.length, 89 | pseudo = selector.charAt(0) === ":", 90 | j, 91 | curSS, 92 | cs, 93 | a; 94 | selector = (pseudo ? "" : ",") + selector.split("::").join(":").toLowerCase() + ","; //note: old versions of IE report tag name selectors as upper case, so we just change everything to lowercase. 95 | 96 | if (pseudo) { 97 | a = []; 98 | } 99 | 100 | while (i--) { 101 | //Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch. 102 | try { 103 | curSS = styleSheets[i][ruleProp]; 104 | 105 | if (!curSS) { 106 | continue; 107 | } 108 | 109 | j = curSS.length; 110 | } catch (e) { 111 | console.warn(e); 112 | continue; 113 | } 114 | 115 | while (--j > -1) { 116 | cs = curSS[j]; 117 | 118 | if (cs.selectorText && ("," + cs.selectorText.split("::").join(":").toLowerCase() + ",").indexOf(selector) !== -1) { 119 | //note: IE adds an extra ":" to pseudo selectors, so .myClass:after becomes .myClass::after, so we need to strip the extra one out. 120 | if (pseudo) { 121 | a.push(cs.style); 122 | } else { 123 | return cs.style; 124 | } 125 | } 126 | } 127 | } 128 | 129 | return a; 130 | }, 131 | register: _initCore 132 | }; 133 | _getGSAP() && gsap.registerPlugin(CSSRulePlugin); 134 | export { CSSRulePlugin as default }; -------------------------------------------------------------------------------- /plugins/gsap/Physics2DPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Physics2DPlugin 3.1.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | 11 | /* eslint-disable */ 12 | var gsap, 13 | _coreInitted, 14 | _getUnit, 15 | _DEG2RAD = Math.PI / 180, 16 | _getGSAP = function _getGSAP() { 17 | return gsap || typeof window !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap; 18 | }, 19 | _round = function _round(value) { 20 | return Math.round(value * 10000) / 10000; 21 | }, 22 | _bonusValidated = 1, 23 | //Physics2DPlugin 24 | _initCore = function _initCore(core) { 25 | gsap = core || _getGSAP(); 26 | 27 | if (!_coreInitted) { 28 | _getUnit = gsap.utils.getUnit; 29 | _coreInitted = 1; 30 | } 31 | }; 32 | 33 | var PhysicsProp = function PhysicsProp(target, p, velocity, acceleration, stepsPerTimeUnit) { 34 | var cache = target._gsap, 35 | curVal = cache.get(target, p); 36 | this.p = p; 37 | this.set = cache.set(target, p); //setter 38 | 39 | this.s = this.val = parseFloat(curVal); 40 | this.u = _getUnit(curVal) || 0; 41 | this.vel = velocity || 0; 42 | this.v = this.vel / stepsPerTimeUnit; 43 | 44 | if (acceleration || acceleration === 0) { 45 | this.acc = acceleration; 46 | this.a = this.acc / (stepsPerTimeUnit * stepsPerTimeUnit); 47 | } else { 48 | this.acc = this.a = 0; 49 | } 50 | }; 51 | 52 | export var Physics2DPlugin = { 53 | version: "3.1.1", 54 | name: "physics2D", 55 | register: _initCore, 56 | init: function init(target, value, tween) { 57 | if (!_coreInitted) { 58 | _initCore(); 59 | } 60 | 61 | var data = this, 62 | angle = +value.angle || 0, 63 | velocity = +value.velocity || 0, 64 | acceleration = +value.acceleration || 0, 65 | xProp = value.xProp || "x", 66 | yProp = value.yProp || "y", 67 | aAngle = value.accelerationAngle || value.accelerationAngle === 0 ? +value.accelerationAngle : angle; 68 | data.target = target; 69 | data.tween = tween; 70 | data.step = 0; 71 | data.sps = 30; //steps per second 72 | 73 | if (value.gravity) { 74 | acceleration = +value.gravity; 75 | aAngle = 90; 76 | } 77 | 78 | angle *= _DEG2RAD; 79 | aAngle *= _DEG2RAD; 80 | data.fr = 1 - (+value.friction || 0); 81 | 82 | data._props.push(xProp, yProp); 83 | 84 | data.xp = new PhysicsProp(target, xProp, Math.cos(angle) * velocity, Math.cos(aAngle) * acceleration, data.sps); 85 | data.yp = new PhysicsProp(target, yProp, Math.sin(angle) * velocity, Math.sin(aAngle) * acceleration, data.sps); 86 | data.skipX = data.skipY = 0; 87 | }, 88 | render: function render(ratio, data) { 89 | var xp = data.xp, 90 | yp = data.yp, 91 | tween = data.tween, 92 | target = data.target, 93 | step = data.step, 94 | sps = data.sps, 95 | fr = data.fr, 96 | skipX = data.skipX, 97 | skipY = data.skipY, 98 | time = tween._from ? tween._dur - tween._time : tween._time, 99 | x, 100 | y, 101 | tt, 102 | steps, 103 | remainder, 104 | i; 105 | 106 | if (data.fr === 1) { 107 | tt = time * time * 0.5; 108 | x = xp.s + (xp.vel * time + xp.acc * tt); 109 | y = yp.s + (yp.vel * time + yp.acc * tt); 110 | } else { 111 | time *= sps; 112 | steps = i = (time | 0) - step; 113 | remainder = time % 1; 114 | 115 | if (i >= 0) { 116 | //going forward 117 | while (i--) { 118 | xp.v += xp.a; 119 | yp.v += yp.a; 120 | xp.v *= fr; 121 | yp.v *= fr; 122 | xp.val += xp.v; 123 | yp.val += yp.v; 124 | } 125 | } else { 126 | //going backwards 127 | i = -i; 128 | 129 | while (i--) { 130 | xp.val -= xp.v; 131 | yp.val -= yp.v; 132 | xp.v /= fr; 133 | yp.v /= fr; 134 | xp.v -= xp.a; 135 | yp.v -= yp.a; 136 | } 137 | } 138 | 139 | x = xp.val + xp.v * remainder; 140 | y = yp.val + yp.v * remainder; 141 | data.step += steps; 142 | } 143 | 144 | if (!skipX) { 145 | xp.set(target, xp.p, _round(x) + xp.u); 146 | } 147 | 148 | if (!skipY) { 149 | yp.set(target, yp.p, _round(y) + yp.u); 150 | } 151 | }, 152 | kill: function kill(property) { 153 | if (this.xp.p === property) { 154 | this.skipX = 1; 155 | } 156 | 157 | if (this.yp.p === property) { 158 | this.skipY = 1; 159 | } 160 | } 161 | }; 162 | _getGSAP() && gsap.registerPlugin(Physics2DPlugin); 163 | export { Physics2DPlugin as default }; -------------------------------------------------------------------------------- /plugins/gsap/PhysicsPropsPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * PhysicsPropsPlugin 3.1.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | 11 | /* eslint-disable */ 12 | var gsap, 13 | _coreInitted, 14 | _getUnit, 15 | _getGSAP = function _getGSAP() { 16 | return gsap || typeof window !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap; 17 | }, 18 | _round = function _round(value) { 19 | return Math.round(value * 10000) / 10000; 20 | }, 21 | _bonusValidated = 1, 22 | //PhysicsPropsPlugin 23 | _initCore = function _initCore(core) { 24 | gsap = core || _getGSAP(); 25 | 26 | if (!_coreInitted) { 27 | _getUnit = gsap.utils.getUnit; 28 | _coreInitted = 1; 29 | } 30 | }; 31 | 32 | var PhysicsProp = function PhysicsProp(target, p, velocity, acceleration, friction, stepsPerTimeUnit) { 33 | var cache = target._gsap, 34 | curVal = cache.get(target, p); 35 | this.p = p; 36 | this.set = cache.set(target, p); //setter 37 | 38 | this.s = this.val = parseFloat(curVal); 39 | this.u = _getUnit(curVal) || 0; 40 | this.vel = velocity || 0; 41 | this.v = this.vel / stepsPerTimeUnit; 42 | 43 | if (acceleration || acceleration === 0) { 44 | this.acc = acceleration; 45 | this.a = this.acc / (stepsPerTimeUnit * stepsPerTimeUnit); 46 | } else { 47 | this.acc = this.a = 0; 48 | } 49 | 50 | this.fr = 1 - (friction || 0); 51 | }; 52 | 53 | export var PhysicsPropsPlugin = { 54 | version: "3.1.1", 55 | name: "physicsProps", 56 | register: _initCore, 57 | init: function init(target, value, tween) { 58 | if (!_coreInitted) { 59 | _initCore(); 60 | } 61 | 62 | var data = this, 63 | p; 64 | data.target = target; 65 | data.tween = tween; 66 | data.step = 0; 67 | data.sps = 30; //steps per second 68 | 69 | data.vProps = []; 70 | 71 | for (p in value) { 72 | var _value$p = value[p], 73 | velocity = _value$p.velocity, 74 | acceleration = _value$p.acceleration, 75 | friction = _value$p.friction; 76 | 77 | if (velocity || acceleration) { 78 | data.vProps.push(new PhysicsProp(target, p, velocity, acceleration, friction, data.sps)); 79 | 80 | data._props.push(p); 81 | 82 | if (friction) { 83 | data.hasFr = 1; 84 | } 85 | } 86 | } 87 | }, 88 | render: function render(ratio, data) { 89 | var vProps = data.vProps, 90 | tween = data.tween, 91 | target = data.target, 92 | step = data.step, 93 | hasFr = data.hasFr, 94 | sps = data.sps, 95 | i = vProps.length, 96 | time = tween._from ? tween._dur - tween._time : tween._time, 97 | curProp, 98 | steps, 99 | remainder, 100 | j, 101 | tt; 102 | 103 | if (hasFr) { 104 | time *= sps; 105 | steps = (time | 0) - step; 106 | remainder = time % 1; 107 | 108 | if (steps >= 0) { 109 | //going forward 110 | while (i--) { 111 | curProp = vProps[i]; 112 | j = steps; 113 | 114 | while (j--) { 115 | curProp.v += curProp.a; 116 | curProp.v *= curProp.fr; 117 | curProp.val += curProp.v; 118 | } 119 | 120 | curProp.set(target, curProp.p, _round(curProp.val + curProp.v * remainder) + curProp.u); 121 | } 122 | } else { 123 | //going backwards 124 | while (i--) { 125 | curProp = vProps[i]; 126 | j = -steps; 127 | 128 | while (j--) { 129 | curProp.val -= curProp.v; 130 | curProp.v /= curProp.fr; 131 | curProp.v -= curProp.a; 132 | } 133 | 134 | curProp.set(target, curProp.p, _round(curProp.val + curProp.v * remainder) + curProp.u); 135 | } 136 | } 137 | 138 | data.step += steps; 139 | } else { 140 | tt = time * time * 0.5; 141 | 142 | while (i--) { 143 | curProp = vProps[i]; 144 | curProp.set(target, curProp.p, _round(curProp.s + curProp.vel * time + curProp.acc * tt) + curProp.u); 145 | } 146 | } 147 | }, 148 | kill: function kill(property) { 149 | var vProps = this.vProps, 150 | i = vProps.length; 151 | 152 | while (i--) { 153 | if (vProps[i].p === property) { 154 | vProps.splice(i, 1); 155 | } 156 | } 157 | } 158 | }; 159 | _getGSAP() && gsap.registerPlugin(PhysicsPropsPlugin); 160 | export { PhysicsPropsPlugin as default }; -------------------------------------------------------------------------------- /plugins/gsap/all.js: -------------------------------------------------------------------------------- 1 | import gsap from "./gsap-core.js"; 2 | import CSSPlugin from "./CSSPlugin.js"; 3 | var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap, // to protect from tree shaking 4 | TweenMaxWithCSS = gsapWithCSS.core.Tween; 5 | 6 | export { gsapWithCSS as gsap, gsapWithCSS as default, CSSPlugin, TweenMaxWithCSS as TweenMax }; 7 | export { TweenLite, TimelineMax, TimelineLite, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, wrap, wrapYoyo, distribute, random, snap, normalize, getUnit, clamp, splitColor, toArray, mapRange, pipe, unitize, interpolate, shuffle } from "./gsap-core.js"; 8 | export * from "./Draggable.js"; 9 | export * from "./CSSRulePlugin.js"; 10 | export * from "./EaselPlugin.js"; 11 | export * from "./EasePack.js"; 12 | export * from "./MotionPathPlugin.js"; 13 | export * from "./PixiPlugin.js"; 14 | export * from "./ScrollToPlugin.js"; 15 | export * from "./TextPlugin.js"; 16 | 17 | //BONUS EXPORTS 18 | export * from "./CustomEase.js"; 19 | export * from "./DrawSVGPlugin.js"; 20 | export * from "./Physics2DPlugin.js"; 21 | export * from "./PhysicsPropsPlugin.js"; 22 | export * from "./ScrambleTextPlugin.js"; 23 | export * from "./CustomBounce.js"; 24 | export * from "./CustomWiggle.js"; 25 | export * from "./GSDevTools.js"; 26 | export * from "./InertiaPlugin.js"; 27 | export * from "./MorphSVGPlugin.js"; 28 | export * from "./MotionPathHelper.js"; 29 | export * from "./SplitText.js"; -------------------------------------------------------------------------------- /plugins/gsap/index.js: -------------------------------------------------------------------------------- 1 | import { gsap, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, TweenLite, TimelineLite, TimelineMax } from "./gsap-core.js"; 2 | import { CSSPlugin } from "./CSSPlugin.js"; 3 | var gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap, 4 | // to protect from tree shaking 5 | TweenMaxWithCSS = gsapWithCSS.core.Tween; 6 | export { gsapWithCSS as gsap, gsapWithCSS as default, CSSPlugin, TweenMaxWithCSS as TweenMax, TweenLite, TimelineMax, TimelineLite, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ }; -------------------------------------------------------------------------------- /plugins/gsap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gsap", 3 | "version": "3.1.1", 4 | "description": "GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on millions of sites. GSAP works around countless browser inconsistencies; your animations **just work**. At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! See https://greensock.com/why-gsap/ for what makes GSAP so special.", 5 | "homepage": "https://greensock.com", 6 | "module": "index.js", 7 | "main": "dist/gsap.js", 8 | "types": "types/index.d.ts", 9 | "filename": "gsap.min.js", 10 | "sideEffects": false, 11 | "keywords": [ 12 | "GSAP", 13 | "GreenSock", 14 | "animation", 15 | "MotionPathPlugin", 16 | "motion", 17 | "motionPath", 18 | "easing", 19 | "JavaScript", 20 | "PixiPlugin", 21 | "CustomEase", 22 | "SVG", 23 | "3D", 24 | "2D", 25 | "transform", 26 | "morph", 27 | "morphing", 28 | "tweening" 29 | ], 30 | "maintainers": [ 31 | { 32 | "name": "Jack Doyle", 33 | "email": "jack@greensock.com", 34 | "web": "https://greensock.com" 35 | } 36 | ], 37 | "license": "Standard 'no charge' license: https://greensock.com/standard-license. Club GreenSock members get more: https://greensock.com/licensing/. Why GreenSock doesn't employ an MIT license: https://greensock.com/why-license/", 38 | "bugs": { 39 | "url": "https://greensock.com/forums/" 40 | }, 41 | "repository": { 42 | "type": "git", 43 | "url": "https://github.com/greensock/GSAP" 44 | } 45 | 46 | } -------------------------------------------------------------------------------- /plugins/gsap/src/CSSRulePlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * CSSRulePlugin 3.1.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let gsap, _coreInitted, _win, _doc, CSSPlugin, 13 | _windowExists = () => typeof(window) !== "undefined", 14 | _getGSAP = () => gsap || (_windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap), 15 | _checkRegister = () => { 16 | if (!_coreInitted) { 17 | _initCore(); 18 | if (!CSSPlugin) { 19 | console.warn("Please gsap.registerPlugin(CSSPlugin, CSSRulePlugin)"); 20 | } 21 | } 22 | return _coreInitted; 23 | }, 24 | _initCore = core => { 25 | gsap = core || _getGSAP(); 26 | if (_windowExists()) { 27 | _win = window; 28 | _doc = document; 29 | } 30 | if (gsap) { 31 | CSSPlugin = gsap.plugins.css; 32 | if (CSSPlugin) { 33 | _coreInitted = 1; 34 | } 35 | } 36 | }; 37 | 38 | 39 | export const CSSRulePlugin = { 40 | version: "3.1.1", 41 | name: "cssRule", 42 | init(target, value, tween, index, targets) { 43 | if (!_checkRegister() || typeof(target.cssText) === "undefined") { 44 | return false; 45 | } 46 | let div = target._gsProxy = target._gsProxy || _doc.createElement("div"); 47 | this.ss = target; 48 | this.style = div.style; 49 | div.style.cssText = target.cssText; 50 | CSSPlugin.prototype.init.call(this, div, value, tween, index, targets); //we just offload all the work to the regular CSSPlugin and then copy the cssText back over to the rule in the render() method. This allows us to have all of the updates to CSSPlugin automatically flow through to CSSRulePlugin instead of having to maintain both 51 | }, 52 | render(ratio, data) { 53 | let pt = data._pt, 54 | style = data.style, 55 | ss = data.ss, 56 | i; 57 | while (pt) { 58 | pt.r(ratio, pt.d); 59 | pt = pt._next; 60 | } 61 | i = style.length; 62 | while (--i > -1) { 63 | ss[style[i]] = style[style[i]]; 64 | } 65 | }, 66 | getRule(selector) { 67 | _checkRegister(); 68 | let ruleProp = _doc.all ? "rules" : "cssRules", 69 | styleSheets = _doc.styleSheets, 70 | i = styleSheets.length, 71 | pseudo = (selector.charAt(0) === ":"), 72 | j, curSS, cs, a; 73 | selector = (pseudo ? "" : ",") + selector.split("::").join(":").toLowerCase() + ","; //note: old versions of IE report tag name selectors as upper case, so we just change everything to lowercase. 74 | if (pseudo) { 75 | a = []; 76 | } 77 | while (i--) { 78 | //Firefox may throw insecure operation errors when css is loaded from other domains, so try/catch. 79 | try { 80 | curSS = styleSheets[i][ruleProp]; 81 | if (!curSS) { 82 | continue; 83 | } 84 | j = curSS.length; 85 | } catch (e) { 86 | console.warn(e); 87 | continue; 88 | } 89 | while (--j > -1) { 90 | cs = curSS[j]; 91 | if (cs.selectorText && ("," + cs.selectorText.split("::").join(":").toLowerCase() + ",").indexOf(selector) !== -1) { //note: IE adds an extra ":" to pseudo selectors, so .myClass:after becomes .myClass::after, so we need to strip the extra one out. 92 | if (pseudo) { 93 | a.push(cs.style); 94 | } else { 95 | return cs.style; 96 | } 97 | } 98 | } 99 | } 100 | return a; 101 | }, 102 | register: _initCore 103 | }; 104 | 105 | _getGSAP() && gsap.registerPlugin(CSSRulePlugin); 106 | 107 | export { CSSRulePlugin as default }; -------------------------------------------------------------------------------- /plugins/gsap/src/CustomBounce.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * CustomBounce 3.1.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let gsap, _coreInitted, createCustomEase, 13 | _getGSAP = () => gsap || (typeof(window) !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap), 14 | _initCore = required => { 15 | gsap = _getGSAP(); 16 | createCustomEase = gsap && gsap.parseEase("_CE"); 17 | if (createCustomEase) { 18 | _coreInitted = 1; 19 | gsap.parseEase("bounce").config = vars => typeof(vars) === "object" ? _create("", vars) : _create("bounce(" + vars + ")", {strength:+vars}); 20 | } else { 21 | required && console.warn("Please gsap.registerPlugin(CustomEase, CustomBounce)"); 22 | } 23 | }, 24 | _normalizeX = a => { //scales all the x values in an array [x, y, x, y...] AND rounds them to the closest hundredth (decimal) 25 | let l = a.length, 26 | s = 1 / a[l - 2], 27 | rnd = 1000, 28 | i; 29 | for (i = 2; i < l; i += 2) { 30 | a[i] = ~~(a[i] * s * rnd) / rnd; 31 | } 32 | a[l - 2] = 1; //in case there are any rounding errors. x should always end at 1. 33 | }, 34 | _bonusValidated = 1, //CustomBounce 35 | _create = (id, vars) => { 36 | if (!_coreInitted) { 37 | _initCore(1); 38 | } 39 | vars = vars || {}; 40 | if (_bonusValidated) { 41 | let max = 0.999, 42 | decay = Math.min(max, vars.strength || 0.7), // Math.min(0.999, 1 - 0.3 / (vars.strength || 1)), 43 | decayX = decay, 44 | gap = (vars.squash || 0) / 100, 45 | originalGap = gap, 46 | slope = 1 / 0.03, 47 | w = 0.2, 48 | h = 1, 49 | prevX = 0.1, 50 | path = [0, 0, 0.07, 0, 0.1, 1, 0.1, 1], 51 | squashPath = [0, 0, 0, 0, 0.1, 0, 0.1, 0], 52 | cp1, cp2, x, y, i, nextX, squishMagnitude; 53 | for (i = 0; i < 200; i++) { 54 | w *= decayX * ((decayX + 1) / 2); 55 | h *= decay * decay; 56 | nextX = prevX + w; 57 | x = prevX + w * 0.49; 58 | y = 1 - h; 59 | cp1 = prevX + h / slope; 60 | cp2 = x + (x - cp1) * 0.8; 61 | 62 | if (gap) { 63 | prevX += gap; 64 | cp1 += gap; 65 | x += gap; 66 | cp2 += gap; 67 | nextX += gap; 68 | squishMagnitude = gap / originalGap; 69 | squashPath.push( 70 | prevX - gap, 0, 71 | prevX - gap, squishMagnitude, 72 | prevX - gap / 2, squishMagnitude, //center peak anchor 73 | prevX, squishMagnitude, 74 | prevX, 0, 75 | prevX, 0, //base anchor 76 | prevX, squishMagnitude * -0.6, 77 | prevX + (nextX - prevX) / 6, 0, 78 | nextX, 0 79 | ); 80 | path.push(prevX - gap, 1, 81 | prevX, 1, 82 | prevX, 1); 83 | gap *= decay * decay; 84 | } 85 | 86 | path.push(prevX, 1, 87 | cp1, y, 88 | x, y, 89 | cp2, y, 90 | nextX, 1, 91 | nextX, 1); 92 | 93 | decay *= 0.95; 94 | slope = h / (nextX - cp2); 95 | prevX = nextX; 96 | if (y > max) { 97 | break; 98 | } 99 | } 100 | 101 | if (vars.endAtStart && vars.endAtStart !== "false") { 102 | x = -0.1; 103 | path.unshift(x, 1, x, 1, -0.07, 0); 104 | if (originalGap) { 105 | gap = originalGap * 2.5; //make the initial anticipation squash longer (more realistic) 106 | x -= gap; 107 | path.unshift(x, 1, x, 1, x, 1); 108 | squashPath.splice(0, 6); 109 | squashPath.unshift(x, 0, x, 0, x, 1, x + gap / 2, 1, x + gap, 1, x + gap, 0, x + gap, 0, x + gap, -0.6, x + gap + 0.033, 0); 110 | for (i = 0; i < squashPath.length; i+=2) { 111 | squashPath[i] -= x; 112 | } 113 | } 114 | for (i = 0; i < path.length; i+=2) { 115 | path[i] -= x; 116 | path[i+1] = 1 - path[i+1]; 117 | } 118 | } 119 | if (gap) { 120 | _normalizeX(squashPath); 121 | squashPath[2] = "C" + squashPath[2]; 122 | createCustomEase(vars.squashID || (id + "-squash"), "M" + squashPath.join(",")); 123 | } 124 | _normalizeX(path); 125 | path[2] = "C" + path[2]; 126 | return createCustomEase(id, "M" + path.join(",")); 127 | } 128 | }; 129 | 130 | export class CustomBounce { 131 | 132 | constructor(id, vars) { 133 | this.ease = _create(id, vars); 134 | } 135 | 136 | static create(id, vars) { 137 | return _create(id, vars); 138 | } 139 | 140 | static register(core) { 141 | gsap = core; 142 | _initCore(); 143 | } 144 | 145 | } 146 | 147 | _getGSAP() && gsap.registerPlugin(CustomBounce); 148 | 149 | CustomBounce.version = "3.1.1"; 150 | 151 | export { CustomBounce as default }; -------------------------------------------------------------------------------- /plugins/gsap/src/CustomWiggle.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * CustomWiggle 3.1.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let gsap, _coreInitted, createCustomEase, 13 | _getGSAP = () => gsap || (typeof(window) !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap), 14 | _eases = { 15 | easeOut: "M0,1,C0.7,1,0.6,0,1,0", 16 | easeInOut: "M0,0,C0.1,0,0.24,1,0.444,1,0.644,1,0.6,0,1,0", 17 | anticipate: "M0,0,C0,0.222,0.024,0.386,0,0.4,0.18,0.455,0.65,0.646,0.7,0.67,0.9,0.76,1,0.846,1,1", 18 | uniform: "M0,0,C0,0.95,0,1,0,1,0,1,1,1,1,1,1,1,1,0,1,0" 19 | }, 20 | _linearEase = p => p, 21 | _initCore = required => { 22 | if (!_coreInitted) { 23 | gsap = _getGSAP(); 24 | createCustomEase = gsap && gsap.parseEase("_CE"); 25 | if (createCustomEase) { 26 | for (let p in _eases) { 27 | _eases[p] = createCustomEase("", _eases[p]); 28 | } 29 | _coreInitted = 1; 30 | _create("wiggle").config = vars => typeof(vars) === "object" ? _create("", vars) : _create("wiggle(" + vars + ")", {wiggles:+vars}); 31 | } else { 32 | required && console.warn("Please gsap.registerPlugin(CustomEase, CustomWiggle)"); 33 | } 34 | } 35 | }, 36 | _parseEase = (ease, invertNonCustomEases) => { 37 | if (typeof(ease) !== "function") { 38 | ease = gsap.parseEase(ease) || createCustomEase("", ease); 39 | } 40 | return (ease.custom || !invertNonCustomEases) ? ease : p => 1 - ease(p); 41 | }, 42 | _bonusValidated = 1, //CustomWiggle 43 | _create = (id, vars) => { 44 | if (!_coreInitted) { 45 | _initCore(1); 46 | } 47 | vars = vars || {}; 48 | let wiggles = (vars.wiggles || 10) | 0, 49 | inc = 1 / wiggles, 50 | x = inc / 2, 51 | anticipate = (vars.type === "anticipate"), 52 | yEase = _eases[vars.type] || _eases.easeOut, 53 | xEase = _linearEase, 54 | rnd = 1000, 55 | nextX, nextY, angle, handleX, handleY, easedX, y, path, i; 56 | if (_bonusValidated) { 57 | if (anticipate) { //the anticipate ease is actually applied on the x-axis (timing) and uses easeOut for amplitude. 58 | xEase = yEase; 59 | yEase = _eases.easeOut; 60 | } 61 | if (vars.timingEase) { 62 | xEase = _parseEase(vars.timingEase); 63 | } 64 | if (vars.amplitudeEase) { 65 | yEase = _parseEase(vars.amplitudeEase, true); 66 | } 67 | easedX = xEase(x); 68 | y = anticipate ? -yEase(x) : yEase(x); 69 | path = [0, 0, easedX / 4, 0, easedX / 2, y, easedX, y]; 70 | 71 | if (vars.type === "random") { //if we just select random values on the y-axis and plug them into the "normal" algorithm, since the control points are always straight horizontal, it creates a bit of a slowdown at each anchor which just didn't seem as desirable, so we switched to an algorithm that bends the control points to be more in line with their context. 72 | path.length = 4; 73 | nextX = xEase(inc); 74 | nextY = Math.random() * 2 - 1; 75 | for (i = 2; i < wiggles; i++) { 76 | x = nextX; 77 | y = nextY; 78 | nextX = xEase(inc * i); 79 | nextY = Math.random() * 2 - 1; 80 | angle = Math.atan2(nextY - path[path.length - 3], nextX - path[path.length - 4]); 81 | handleX = Math.cos(angle) * inc; 82 | handleY = Math.sin(angle) * inc; 83 | path.push(x - handleX, y - handleY, x, y, x + handleX, y + handleY); 84 | } 85 | path.push(nextX, 0, 1, 0); 86 | } else { 87 | for (i = 1; i < wiggles; i++) { 88 | path.push(xEase(x + inc / 2), y); 89 | x += inc; 90 | y = ((y > 0) ? -1 : 1) * (yEase(i * inc)); 91 | easedX = xEase(x); 92 | path.push(xEase(x - inc / 2), y, easedX, y); 93 | } 94 | path.push(xEase(x + inc / 4), y, xEase(x + inc / 4), 0, 1, 0); 95 | } 96 | i = path.length; 97 | while (--i > -1) { 98 | path[i] = ~~(path[i] * rnd) / rnd; //round values to avoid odd strings for super tiny values 99 | } 100 | path[2] = "C" + path[2]; 101 | return createCustomEase(id, "M" + path.join(",")); 102 | } 103 | }; 104 | 105 | export class CustomWiggle { 106 | 107 | constructor(id, vars) { 108 | this.ease = _create(id, vars); 109 | } 110 | 111 | static create(id, vars) { 112 | return _create(id, vars); 113 | } 114 | 115 | static register(core) { 116 | gsap = core; 117 | _initCore(); 118 | } 119 | 120 | } 121 | 122 | _getGSAP() && gsap.registerPlugin(CustomWiggle); 123 | 124 | CustomWiggle.version = "3.1.1"; 125 | 126 | export { CustomWiggle as default }; -------------------------------------------------------------------------------- /plugins/gsap/src/Physics2DPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Physics2DPlugin 3.1.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let gsap, _coreInitted, _getUnit, 13 | _DEG2RAD = Math.PI / 180, 14 | _getGSAP = () => gsap || (typeof(window) !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap), 15 | _round = value => Math.round(value * 10000) / 10000, 16 | _bonusValidated = 1, //Physics2DPlugin 17 | _initCore = core => { 18 | gsap = core || _getGSAP(); 19 | if (!_coreInitted) { 20 | _getUnit = gsap.utils.getUnit; 21 | _coreInitted = 1; 22 | } 23 | }; 24 | 25 | class PhysicsProp { 26 | 27 | constructor(target, p, velocity, acceleration, stepsPerTimeUnit) { 28 | let cache = target._gsap, 29 | curVal = cache.get(target, p); 30 | this.p = p; 31 | this.set = cache.set(target, p); //setter 32 | this.s = this.val = parseFloat(curVal); 33 | this.u = _getUnit(curVal) || 0; 34 | this.vel = velocity || 0; 35 | this.v = this.vel / stepsPerTimeUnit; 36 | if (acceleration || acceleration === 0) { 37 | this.acc = acceleration; 38 | this.a = this.acc / (stepsPerTimeUnit * stepsPerTimeUnit); 39 | } else { 40 | this.acc = this.a = 0; 41 | } 42 | } 43 | 44 | } 45 | 46 | 47 | export const Physics2DPlugin = { 48 | version:"3.1.1", 49 | name:"physics2D", 50 | register: _initCore, 51 | init(target, value, tween) { 52 | if (!_coreInitted) { 53 | _initCore(); 54 | } 55 | let data = this, 56 | angle = +value.angle || 0, 57 | velocity = +value.velocity || 0, 58 | acceleration = +value.acceleration || 0, 59 | xProp = value.xProp || "x", 60 | yProp = value.yProp || "y", 61 | aAngle = (value.accelerationAngle || value.accelerationAngle === 0) ? +value.accelerationAngle : angle; 62 | data.target = target; 63 | data.tween = tween; 64 | data.step = 0; 65 | data.sps = 30; //steps per second 66 | if (value.gravity) { 67 | acceleration = +value.gravity; 68 | aAngle = 90; 69 | } 70 | angle *= _DEG2RAD; 71 | aAngle *= _DEG2RAD; 72 | data.fr = 1 - (+value.friction || 0); 73 | data._props.push(xProp, yProp); 74 | 75 | data.xp = new PhysicsProp(target, xProp, Math.cos(angle) * velocity, Math.cos(aAngle) * acceleration, data.sps); 76 | data.yp = new PhysicsProp(target, yProp, Math.sin(angle) * velocity, Math.sin(aAngle) * acceleration, data.sps); 77 | data.skipX = data.skipY = 0; 78 | }, 79 | render(ratio, data) { 80 | let { xp, yp, tween, target, step, sps, fr, skipX, skipY } = data, 81 | time = tween._from ? tween._dur - tween._time : tween._time, 82 | x, y, tt, steps, remainder, i; 83 | if (data.fr === 1) { 84 | tt = time * time * 0.5; 85 | x = xp.s + ((xp.vel * time) + (xp.acc * tt)); 86 | y = yp.s + ((yp.vel * time) + (yp.acc * tt)); 87 | } else { 88 | time *= sps; 89 | steps = i = (time | 0) - step; 90 | remainder = (time % 1); 91 | if (i >= 0) { //going forward 92 | while (i--) { 93 | xp.v += xp.a; 94 | yp.v += yp.a; 95 | xp.v *= fr; 96 | yp.v *= fr; 97 | xp.val += xp.v; 98 | yp.val += yp.v; 99 | } 100 | 101 | } else { //going backwards 102 | i = -i; 103 | while (i--) { 104 | xp.val -= xp.v; 105 | yp.val -= yp.v; 106 | xp.v /= fr; 107 | yp.v /= fr; 108 | xp.v -= xp.a; 109 | yp.v -= yp.a; 110 | } 111 | } 112 | x = xp.val + (xp.v * remainder); 113 | y = yp.val + (yp.v * remainder); 114 | data.step += steps; 115 | } 116 | if (!skipX) { 117 | xp.set(target, xp.p, _round(x) + xp.u); 118 | } 119 | if (!skipY) { 120 | yp.set(target, yp.p, _round(y) + yp.u); 121 | } 122 | }, 123 | kill(property) { 124 | if (this.xp.p === property) { 125 | this.skipX = 1; 126 | } 127 | if (this.yp.p === property) { 128 | this.skipY = 1; 129 | } 130 | } 131 | }; 132 | 133 | 134 | _getGSAP() && gsap.registerPlugin(Physics2DPlugin); 135 | 136 | export { Physics2DPlugin as default }; -------------------------------------------------------------------------------- /plugins/gsap/src/PhysicsPropsPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * PhysicsPropsPlugin 3.1.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | let gsap, _coreInitted, _getUnit, 13 | _getGSAP = () => gsap || (typeof(window) !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap), 14 | _round = value => Math.round(value * 10000) / 10000, 15 | _bonusValidated = 1, //PhysicsPropsPlugin 16 | _initCore = core => { 17 | gsap = core || _getGSAP(); 18 | if (!_coreInitted) { 19 | _getUnit = gsap.utils.getUnit; 20 | _coreInitted = 1; 21 | } 22 | }; 23 | 24 | class PhysicsProp { 25 | 26 | constructor(target, p, velocity, acceleration, friction, stepsPerTimeUnit) { 27 | let cache = target._gsap, 28 | curVal = cache.get(target, p); 29 | this.p = p; 30 | this.set = cache.set(target, p); //setter 31 | this.s = this.val = parseFloat(curVal); 32 | this.u = _getUnit(curVal) || 0; 33 | this.vel = velocity || 0; 34 | this.v = this.vel / stepsPerTimeUnit; 35 | if (acceleration || acceleration === 0) { 36 | this.acc = acceleration; 37 | this.a = this.acc / (stepsPerTimeUnit * stepsPerTimeUnit); 38 | } else { 39 | this.acc = this.a = 0; 40 | } 41 | this.fr = 1 - (friction || 0) ; 42 | } 43 | 44 | } 45 | 46 | 47 | export const PhysicsPropsPlugin = { 48 | version:"3.1.1", 49 | name:"physicsProps", 50 | register: _initCore, 51 | init(target, value, tween) { 52 | if (!_coreInitted) { 53 | _initCore(); 54 | } 55 | let data = this, 56 | p; 57 | data.target = target; 58 | data.tween = tween; 59 | data.step = 0; 60 | data.sps = 30; //steps per second 61 | data.vProps = []; 62 | for (p in value) { 63 | let { velocity, acceleration, friction } = value[p]; 64 | if (velocity || acceleration) { 65 | data.vProps.push(new PhysicsProp(target, p, velocity, acceleration, friction, data.sps)); 66 | data._props.push(p); 67 | if (friction) { 68 | data.hasFr = 1; 69 | } 70 | } 71 | } 72 | }, 73 | render(ratio, data) { 74 | let { vProps, tween, target, step, hasFr, sps } = data, 75 | i = vProps.length, 76 | time = tween._from ? tween._dur - tween._time : tween._time, 77 | curProp, steps, remainder, j, tt; 78 | if (hasFr) { 79 | time *= sps; 80 | steps = (time | 0) - step; 81 | remainder = time % 1; 82 | if (steps >= 0) { //going forward 83 | while (i--) { 84 | curProp = vProps[i]; 85 | j = steps; 86 | while (j--) { 87 | curProp.v += curProp.a; 88 | curProp.v *= curProp.fr; 89 | curProp.val += curProp.v; 90 | } 91 | curProp.set(target, curProp.p, _round(curProp.val + (curProp.v * remainder)) + curProp.u); 92 | } 93 | 94 | } else { //going backwards 95 | while (i--) { 96 | curProp = vProps[i]; 97 | j = -steps; 98 | while (j--) { 99 | curProp.val -= curProp.v; 100 | curProp.v /= curProp.fr; 101 | curProp.v -= curProp.a; 102 | } 103 | curProp.set(target, curProp.p, _round(curProp.val + (curProp.v * remainder)) + curProp.u); 104 | } 105 | } 106 | data.step += steps; 107 | 108 | } else { 109 | tt = time * time * 0.5; 110 | while (i--) { 111 | curProp = vProps[i]; 112 | curProp.set(target, curProp.p, _round(curProp.s + curProp.vel * time + curProp.acc * tt) + curProp.u); 113 | } 114 | } 115 | }, 116 | kill(property) { 117 | let vProps = this.vProps, 118 | i = vProps.length; 119 | while (i--) { 120 | if (vProps[i].p === property) { 121 | vProps.splice(i, 1); 122 | } 123 | } 124 | } 125 | }; 126 | 127 | 128 | _getGSAP() && gsap.registerPlugin(PhysicsPropsPlugin); 129 | 130 | export { PhysicsPropsPlugin as default }; -------------------------------------------------------------------------------- /plugins/gsap/src/TextPlugin.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * TextPlugin 3.1.1 3 | * https://greensock.com 4 | * 5 | * @license Copyright 2008-2020, GreenSock. All rights reserved. 6 | * Subject to the terms at https://greensock.com/standard-license or for 7 | * Club GreenSock members, the agreement issued with that membership. 8 | * @author: Jack Doyle, jack@greensock.com 9 | */ 10 | /* eslint-disable */ 11 | 12 | import { emojiSafeSplit, getText, splitInnerHTML } from "./utils/strings.js"; 13 | 14 | let gsap, _tempDiv, 15 | _getGSAP = () => gsap || (typeof(window) !== "undefined" && (gsap = window.gsap) && gsap.registerPlugin && gsap); 16 | 17 | 18 | export const TextPlugin = { 19 | version:"3.1.1", 20 | name:"text", 21 | init(target, value, tween) { 22 | let i = target.nodeName.toUpperCase(), 23 | data = this, 24 | short, text, original, j, condensedText, condensedOriginal, aggregate, s; 25 | data.svg = (target.getBBox && (i === "TEXT" || i === "TSPAN")); 26 | if (!("innerHTML" in target) && !data.svg) { 27 | return false; 28 | } 29 | data.target = target; 30 | if (typeof(value) !== "object") { 31 | value = {value:value}; 32 | } 33 | if (!("value" in value)) { 34 | data.text = data.original = [""]; 35 | return; 36 | } 37 | data.delimiter = value.delimiter || ""; 38 | original = splitInnerHTML(target, data.delimiter); 39 | if (!_tempDiv) { 40 | _tempDiv = document.createElement("div"); 41 | } 42 | _tempDiv.innerHTML = value.value; 43 | text = splitInnerHTML(_tempDiv, data.delimiter); 44 | data.from = tween._from; 45 | if (data.from) { 46 | i = original; 47 | original = text; 48 | text = i; 49 | } 50 | data.hasClass = !!(value.newClass || value.oldClass); 51 | data.newClass = value.newClass; 52 | data.oldClass = value.oldClass; 53 | i = original.length - text.length; 54 | short = (i < 0) ? original : text; 55 | data.fillChar = value.fillChar || (value.padSpace ? " " : ""); 56 | if (i < 0) { 57 | i = -i; 58 | } 59 | while (--i > -1) { 60 | short.push(data.fillChar); 61 | } 62 | if (value.type === "diff") { 63 | j = 0; 64 | condensedText = []; 65 | condensedOriginal = []; 66 | aggregate = ""; 67 | for (i = 0; i < text.length; i++) { 68 | s = text[i]; 69 | if (s === original[i]) { 70 | aggregate += s; 71 | } else { 72 | condensedText[j] = aggregate + s; 73 | condensedOriginal[j++] = aggregate + original[i]; 74 | aggregate = ""; 75 | } 76 | } 77 | text = condensedText; 78 | original = condensedOriginal; 79 | if (aggregate) { 80 | text.push(aggregate); 81 | original.push(aggregate); 82 | } 83 | } 84 | if (value.speed) { 85 | tween.duration(Math.min(0.05 / value.speed * short.length, value.maxDuration || 9999)); 86 | } 87 | this.original = original; 88 | this.text = text; 89 | this._props.push("text"); 90 | }, 91 | render(ratio, data) { 92 | if (ratio > 1) { 93 | ratio = 1; 94 | } else if (ratio < 0) { 95 | ratio = 0; 96 | } 97 | if (data.from) { 98 | ratio = 1 - ratio; 99 | } 100 | let { text, hasClass, newClass, oldClass, delimiter, target, fillChar, original } = data, 101 | l = text.length, 102 | i = (ratio * l + 0.5) | 0, 103 | applyNew, applyOld, str; 104 | if (hasClass) { 105 | applyNew = (newClass && i); 106 | applyOld = (oldClass && i !== l); 107 | str = (applyNew ? "" : "") + text.slice(0, i).join(delimiter) + (applyNew ? "" : "") + (applyOld ? "" : "") + delimiter + original.slice(i).join(delimiter) + (applyOld ? "" : ""); 108 | } else { 109 | str = text.slice(0, i).join(delimiter) + delimiter + original.slice(i).join(delimiter); 110 | } 111 | if (data.svg) { //SVG text elements don't have an "innerHTML" in Microsoft browsers. 112 | target.textContent = str; 113 | } else { 114 | target.innerHTML = (fillChar === " " && ~str.indexOf(" ")) ? str.split(" ").join("  ") : str; 115 | } 116 | } 117 | }; 118 | 119 | TextPlugin.splitInnerHTML = splitInnerHTML; 120 | TextPlugin.emojiSafeSplit = emojiSafeSplit; 121 | TextPlugin.getText = getText; 122 | 123 | _getGSAP() && gsap.registerPlugin(TextPlugin); 124 | 125 | export { TextPlugin as default }; -------------------------------------------------------------------------------- /plugins/gsap/src/all.js: -------------------------------------------------------------------------------- 1 | import gsap from "./gsap-core.js"; 2 | import CSSPlugin from "./CSSPlugin.js"; 3 | const gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap, // to protect from tree shaking 4 | TweenMaxWithCSS = gsapWithCSS.core.Tween; 5 | 6 | export { gsapWithCSS as gsap, gsapWithCSS as default, CSSPlugin, TweenMaxWithCSS as TweenMax }; 7 | 8 | export { TweenLite, TimelineMax, TimelineLite, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, wrap, wrapYoyo, distribute, random, snap, normalize, getUnit, clamp, splitColor, toArray, mapRange, pipe, unitize, interpolate, shuffle } from "./gsap-core.js"; 9 | export * from "./Draggable.js"; 10 | export * from "./CSSRulePlugin.js"; 11 | export * from "./EaselPlugin.js"; 12 | export * from "./EasePack.js"; 13 | export * from "./MotionPathPlugin.js"; 14 | export * from "./PixiPlugin.js"; 15 | export * from "./ScrollToPlugin.js"; 16 | export * from "./TextPlugin.js"; 17 | 18 | //BONUS EXPORTS 19 | export * from "./CustomEase.js"; 20 | export * from "./DrawSVGPlugin.js"; 21 | export * from "./Physics2DPlugin.js"; 22 | export * from "./PhysicsPropsPlugin.js"; 23 | export * from "./ScrambleTextPlugin.js"; 24 | export * from "./CustomBounce.js"; 25 | export * from "./CustomWiggle.js"; 26 | export * from "./GSDevTools.js"; 27 | export * from "./InertiaPlugin.js"; 28 | export * from "./MorphSVGPlugin.js"; 29 | export * from "./MotionPathHelper.js"; 30 | export * from "./SplitText.js"; -------------------------------------------------------------------------------- /plugins/gsap/src/index.js: -------------------------------------------------------------------------------- 1 | import { gsap, Power0, Power1, Power2, Power3, Power4, Linear, Quad, Cubic, Quart, Quint, Strong, Elastic, Back, SteppedEase, Bounce, Sine, Expo, Circ, TweenLite, TimelineLite, TimelineMax } from "./gsap-core.js"; 2 | import { CSSPlugin } from "./CSSPlugin.js"; 3 | 4 | const gsapWithCSS = gsap.registerPlugin(CSSPlugin) || gsap, // to protect from tree shaking 5 | TweenMaxWithCSS = gsapWithCSS.core.Tween; 6 | 7 | export { 8 | gsapWithCSS as gsap, 9 | gsapWithCSS as default, 10 | CSSPlugin, 11 | TweenMaxWithCSS as TweenMax, 12 | TweenLite, 13 | TimelineMax, 14 | TimelineLite, 15 | Power0, 16 | Power1, 17 | Power2, 18 | Power3, 19 | Power4, 20 | Linear, 21 | Quad, 22 | Cubic, 23 | Quart, 24 | Quint, 25 | Strong, 26 | Elastic, 27 | Back, 28 | SteppedEase, 29 | Bounce, 30 | Sine, 31 | Expo, 32 | Circ 33 | }; -------------------------------------------------------------------------------- /plugins/gsap/types/animation.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace gsap.core { 2 | 3 | // Added to TypeScript 3.5 4 | type Omit = Pick>; 5 | 6 | class Animation { 7 | 8 | static readonly version: string; 9 | 10 | data: any; 11 | 12 | constructor(vars?: object, time?: number); 13 | 14 | delay(value: number): this; 15 | delay(): number; 16 | duration(value: number): this; 17 | duration(): number; 18 | endTime(includeRepeats?: boolean): number; 19 | eventCallback(type: CallbackType, callback: Callback, params?: any[], scope?: object): this; 20 | eventCallback(type: CallbackType): Callback; 21 | invalidate(): this; 22 | isActive(): boolean; 23 | iteration(value: number, supressEvents?: boolean): this; 24 | iteration(): number; 25 | kill(): this; 26 | pause(atTime?: number, supressEvents?: boolean): this; 27 | paused(value: boolean): this; 28 | paused(): boolean; 29 | play(from?: number, supressEvents?: boolean): this; 30 | progress(value: number, supressEvents?: boolean): this; 31 | progress(): number; 32 | rawTime(wrapRepeats?: boolean): number; 33 | repeat(value: number): this; 34 | repeat(): number; 35 | repeatDelay(value: number): this; 36 | repeatDelay(): number; 37 | restart(includeDelay?: boolean, supressEvents?: boolean): this; 38 | resume(from?: number, supressEvents?: boolean): this; 39 | reverse(from?: number, supressEvents?: boolean): this; 40 | reversed(value: boolean): this; 41 | reversed(): boolean; 42 | startTime(value: number): this; 43 | startTime(): number; 44 | seek(time: number, supressEvents?: boolean): this; 45 | then(onFulfilled?: (result: Omit) => any): Promise; 46 | time(value: number, supressEvents?: boolean): this; 47 | time(): number; 48 | timeScale(value: number): this; 49 | timeScale(): number; 50 | totalDuration(value: number): this; 51 | totalDuration(): number; 52 | totalProgress(value: number, supressEvents?: boolean): this; 53 | totalProgress(): number; 54 | totalTime(value: number, supressEvents?: boolean): this; 55 | totalTime(): number; 56 | yoyo(value: boolean): this; 57 | yoyo(): boolean; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /plugins/gsap/types/css-rule-plugin.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const CSSRulePlugin: any; 3 | 4 | declare module "gsap/CSSRulePlugin" { 5 | 6 | // TODO 7 | export const CSSRulePlugin: any; 8 | export { CSSRulePlugin as default }; 9 | } 10 | 11 | declare module "gsap/dist/CSSRulePlugin" { 12 | export * from "gsap/CSSRulePlugin"; 13 | export { CSSRulePlugin as default } from "gsap/CSSRulePlugin"; 14 | } 15 | 16 | declare module "gsap/src/CSSRulePlugin" { 17 | export * from "gsap/CSSRulePlugin"; 18 | export { CSSRulePlugin as default } from "gsap/CSSRulePlugin"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/CSSRulePlugin"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/custom-bounce.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const CustomBounce: any; 3 | 4 | declare module "gsap/CustomBounce" { 5 | 6 | // TODO 7 | export const CustomBounce: any; 8 | export { CustomBounce as default }; 9 | } 10 | 11 | declare module "gsap/dist/CustomBounce" { 12 | export * from "gsap/CustomBounce"; 13 | export { CustomBounce as default } from "gsap/CustomBounce"; 14 | } 15 | 16 | declare module "gsap/src/CustomBounce" { 17 | export * from "gsap/CustomBounce"; 18 | export { CustomBounce as default } from "gsap/CustomBounce"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/CustomBounce"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/custom-ease.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const CustomEase: any; 3 | 4 | declare module "gsap/CustomEase" { 5 | 6 | // TODO 7 | export const CustomEase: any; 8 | export { CustomEase as default }; 9 | } 10 | 11 | declare module "gsap/dist/CustomEase" { 12 | export * from "gsap/CustomEase"; 13 | export { CustomEase as default } from "gsap/CustomEase"; 14 | } 15 | 16 | declare module "gsap/src/CustomEase" { 17 | export * from "gsap/CustomEase"; 18 | export { CustomEase as default } from "gsap/CustomEase"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/CustomEase"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/custom-wiggle.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const CustomWiggle: any; 3 | 4 | declare module "gsap/CustomWiggle" { 5 | 6 | // TODO 7 | export const CustomWiggle: any; 8 | export { CustomWiggle as default }; 9 | } 10 | 11 | declare module "gsap/dist/CustomWiggle" { 12 | export * from "gsap/CustomWiggle"; 13 | export { CustomWiggle as default } from "gsap/CustomWiggle"; 14 | } 15 | 16 | declare module "gsap/src/CustomWiggle" { 17 | export * from "gsap/CustomWiggle"; 18 | export { CustomWiggle as default } from "gsap/CustomWiggle"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/CustomWiggle"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/draw-svg-plugin.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace gsap { 2 | 3 | interface TweenVars { 4 | drawSVG?: BooleanValue | TweenValue; 5 | } 6 | } 7 | 8 | declare namespace gsap.plugins { 9 | 10 | interface DrawSVGPlugin extends Plugin { 11 | getLength(element: DOMTarget): number; 12 | getPosition(element: DOMTarget): number; 13 | } 14 | 15 | interface DrawSVGPluginClass extends DrawSVGPlugin { 16 | new(): PluginScope & DrawSVGPlugin; 17 | prototype: PluginScope & DrawSVGPlugin; 18 | } 19 | 20 | const drawSVG: DrawSVGPluginClass; 21 | } 22 | 23 | declare const DrawSVGPlugin: gsap.plugins.DrawSVGPlugin; 24 | 25 | declare module "gsap/DrawSVGPlugin" { 26 | export const DrawSVGPlugin: gsap.plugins.DrawSVGPlugin; 27 | export { DrawSVGPlugin as default }; 28 | } 29 | 30 | declare module "gsap/src/DrawSVGPlugin" { 31 | export * from "gsap/DrawSVGPlugin"; 32 | export { DrawSVGPlugin as default } from "gsap/DrawSVGPlugin"; 33 | } 34 | 35 | declare module "gsap/dist/DrawSVGPlugin" { 36 | export * from "gsap/DrawSVGPlugin"; 37 | export { DrawSVGPlugin as default } from "gsap/DrawSVGPlugin"; 38 | } 39 | 40 | declare module "gsap/all" { 41 | export * from "gsap/DrawSVGPlugin"; 42 | } 43 | -------------------------------------------------------------------------------- /plugins/gsap/types/ease.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace gsap { 2 | 3 | interface EaseFunction { 4 | (progress: number): number; 5 | } 6 | 7 | interface Ease { 8 | easeIn: EaseFunction; 9 | easeOut: EaseFunction; 10 | easeInOut: EaseFunction; 11 | } 12 | 13 | interface BackConfig extends EaseFunction { 14 | config(overshoot: number): EaseFunction; 15 | } 16 | 17 | interface Back { 18 | easeIn: BackConfig; 19 | easeOut: BackConfig; 20 | easeInOut: BackConfig; 21 | } 22 | 23 | interface EasePack { 24 | SlowMo: gsap.SlowMo; 25 | ExpoScaleEase: gsap.ExpoScaleEase; 26 | RoughEase: gsap.RoughEase; 27 | } 28 | 29 | interface ElasticConfig extends EaseFunction { 30 | config(amplitude: number, period?: number): EaseFunction; 31 | } 32 | 33 | interface Elastic { 34 | easeIn: ElasticConfig; 35 | easeOut: ElasticConfig; 36 | easeInOut: ElasticConfig; 37 | } 38 | 39 | interface ExpoScaleEase { 40 | config(startingScale: number, endingScale: number, ease?: string | EaseFunction): EaseFunction; 41 | } 42 | 43 | interface Linear extends Ease { 44 | easeNone: EaseFunction; 45 | } 46 | 47 | interface RoughEaseVars { 48 | clamp?: boolean; 49 | points?: number; 50 | randomize?: boolean; 51 | strength?: number; 52 | taper?: "in" | "out" | "both" | "none"; 53 | template?: string | EaseFunction 54 | } 55 | 56 | interface RoughEaseEase extends EaseFunction { 57 | config: RoughEaseConfig; 58 | } 59 | 60 | interface RoughEaseConfig extends EaseFunction { 61 | (config?: RoughEaseVars): EaseFunction; 62 | } 63 | 64 | interface RoughEase extends EaseFunction { 65 | config: RoughEaseConfig; 66 | ease: RoughEaseEase; 67 | } 68 | 69 | interface SlowMoEase extends EaseFunction { 70 | config: SlowMoConfig; 71 | } 72 | 73 | interface SlowMoConfig extends EaseFunction { 74 | (linearRatio: number, power?: number, yoyoMode?: boolean): EaseFunction; 75 | } 76 | 77 | interface SlowMo extends EaseFunction { 78 | config: SlowMoConfig; 79 | ease: SlowMoEase; 80 | } 81 | 82 | interface SteppedEase { 83 | config(steps: number): EaseFunction; 84 | } 85 | } 86 | 87 | declare const Back: gsap.Back; 88 | declare const Bounce: gsap.Ease; 89 | declare const Circ: gsap.Ease; 90 | declare const Cubic: gsap.Ease; 91 | declare const Elastic: gsap.Elastic; 92 | declare const Expo: gsap.Ease; 93 | declare const Linear: gsap.Linear; 94 | declare const Power0: gsap.Linear; 95 | declare const Power1: gsap.Ease; 96 | declare const Power2: gsap.Ease; 97 | declare const Power3: gsap.Ease; 98 | declare const Power4: gsap.Ease; 99 | declare const Quad: gsap.Ease; 100 | declare const Quart: gsap.Ease; 101 | declare const Quint: gsap.Ease; 102 | declare const Sine: gsap.Ease; 103 | declare const SteppedEase: gsap.SteppedEase; 104 | declare const Strong: gsap.Ease; 105 | 106 | declare const EasePack: gsap.EasePack; 107 | declare const ExpoScaleEase: gsap.ExpoScaleEase; 108 | declare const RoughEase: gsap.RoughEase; 109 | declare const SlowMo: gsap.SlowMo; 110 | 111 | declare module "gsap/gsap-core" { 112 | export const Back: gsap.Back; 113 | export const Bounce: gsap.Ease; 114 | export const Circ: gsap.Ease; 115 | export const Cubic: gsap.Ease; 116 | export const Elastic: gsap.Elastic; 117 | export const Expo: gsap.Ease; 118 | export const Linear: gsap.Linear; 119 | export const Power0: gsap.Linear; 120 | export const Power1: gsap.Ease; 121 | export const Power2: gsap.Ease; 122 | export const Power3: gsap.Ease; 123 | export const Power4: gsap.Ease; 124 | export const Quad: gsap.Ease; 125 | export const Quart: gsap.Ease; 126 | export const Quint: gsap.Ease; 127 | export const Sine: gsap.Ease; 128 | export const SteppedEase: gsap.SteppedEase; 129 | export const Strong: gsap.Ease; 130 | } 131 | 132 | declare module "gsap/EasePack" { 133 | export const EasePack: gsap.EasePack; 134 | export const ExpoScaleEase: gsap.ExpoScaleEase; 135 | export const SlowMo: gsap.SlowMo; 136 | export const RoughEase: gsap.RoughEase; 137 | export { EasePack as default }; 138 | } 139 | 140 | declare module "gsap/src/EasePack" { 141 | export * from "gsap/EasePack"; 142 | export { EasePack as default } from "gsap/EasePack"; 143 | } 144 | 145 | declare module "gsap/dist/EasePack" { 146 | export * from "gsap/EasePack"; 147 | export { EasePack as default } from "gsap/EasePack"; 148 | } 149 | 150 | declare module "gsap/all" { 151 | export * from "gsap/EasePack"; 152 | } 153 | -------------------------------------------------------------------------------- /plugins/gsap/types/easel-plugin.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const EaselPlugin: any; 3 | 4 | declare module "gsap/EaselPlugin" { 5 | 6 | // TODO 7 | export const EaselPlugin: any; 8 | export { EaselPlugin as default }; 9 | } 10 | 11 | declare module "gsap/dist/EaselPlugin" { 12 | export * from "gsap/EaselPlugin"; 13 | export { EaselPlugin as default } from "gsap/EaselPlugin"; 14 | } 15 | 16 | declare module "gsap/src/EaselPlugin" { 17 | export * from "gsap/EaselPlugin"; 18 | export { EaselPlugin as default } from "gsap/EaselPlugin"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/EaselPlugin"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/gs-dev-tools.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const GSDevTools: any; 3 | 4 | declare module "gsap/GSDevTools" { 5 | 6 | // TODO 7 | export const GSDevTools: any; 8 | export { GSDevTools as default }; 9 | } 10 | 11 | declare module "gsap/dist/GSDevTools" { 12 | export * from "gsap/GSDevTools"; 13 | export { GSDevTools as default } from "gsap/GSDevTools"; 14 | } 15 | 16 | declare module "gsap/src/GSDevTools" { 17 | export * from "gsap/GSDevTools"; 18 | export { GSDevTools as default } from "gsap/GSDevTools"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/GSDevTools"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/gsap-plugins.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace gsap { 2 | 3 | type PluginInit = ( 4 | this: PluginScope, 5 | target: object, 6 | endValue: any, 7 | tween: core.Tween, 8 | index: number, 9 | targets: object[] 10 | ) => void; 11 | 12 | type PluginRender = (this: PropTween, progress: number, data: PluginScope) => void; 13 | type PluginKill = (this: PluginScope) => void; 14 | 15 | interface PluginAliases { 16 | [key: string]: string; 17 | } 18 | 19 | // TODO: Incomplete 20 | interface PropTween { 21 | _next: PropTween; 22 | _prev: PropTween; 23 | d: PluginScope; 24 | r: PluginRender; 25 | t: object; 26 | modifier(...args: any[]): any; // TODO: Add signature 27 | } 28 | 29 | interface PluginScope { 30 | [key: string]: any; 31 | _props: string[]; 32 | _pt: PropTween; 33 | add(...args: any[]): PropTween; // TODO: Add signature 34 | name: string; 35 | init: PluginInit; 36 | kill: PluginKill; 37 | render: PluginRender; 38 | } 39 | 40 | interface PluginStatic { 41 | [key: string]: any; 42 | targetTest(...args: any[]): any; // TODO: Add signature 43 | get(target: object, prop: string): any; // TODO: Add signature 44 | getSetter(...args: any[]): any; // TODO: Add signature 45 | aliases: PluginAliases; 46 | register(core: typeof gsap): void; 47 | } 48 | 49 | // interface Plugin extends Partial, Partial { 50 | interface Plugin extends Partial { 51 | name: string; 52 | init: PluginInit; 53 | kill?: PluginKill; 54 | render?: PluginRender; 55 | } 56 | 57 | interface AttrVars { 58 | [key: string]: ArrayValue | TweenValue; 59 | } 60 | 61 | interface ModifiersVars { 62 | // [key: string]: (value: any, target: object) => any; 63 | [key: string]: (value: any, target: any) => any; 64 | } 65 | 66 | interface SnapVars { 67 | [key: string]: number | number[] | { values: number[], radius?: number }; 68 | } 69 | 70 | interface TweenVars { 71 | attr?: AttrVars; 72 | modifiers?: ModifiersVars; 73 | snap?: SnapVars; 74 | } 75 | } 76 | 77 | declare namespace gsap.plugins { 78 | 79 | interface AttrPlugin extends Plugin {} 80 | interface ModifiersPlugin extends Plugin {} 81 | interface SnapPlugin extends Plugin {} 82 | 83 | interface AttrPluginClass extends AttrPlugin { 84 | new(): PluginScope & AttrPlugin; 85 | prototype: PluginScope & AttrPlugin; 86 | } 87 | 88 | interface ModifiersPluginClass extends ModifiersPlugin { 89 | new(): PluginScope & ModifiersPlugin; 90 | prototype: PluginScope & ModifiersPlugin; 91 | } 92 | 93 | interface SnapPluginClass extends SnapPlugin { 94 | new(): PluginScope & SnapPlugin; 95 | prototype: PluginScope & SnapPlugin; 96 | } 97 | 98 | const attr: AttrPluginClass; 99 | const modifiers: ModifiersPluginClass; 100 | const snap: SnapPluginClass; 101 | } 102 | 103 | declare const AttrPlugin: gsap.plugins.AttrPlugin; 104 | declare const ModifiersPlugin: gsap.plugins.ModifiersPlugin; 105 | declare const SnapPlugin: gsap.plugins.SnapPlugin; 106 | -------------------------------------------------------------------------------- /plugins/gsap/types/index.d.ts: -------------------------------------------------------------------------------- 1 | // Type definitions for gsap 3.0 2 | // Project: https://greensock.com/ 3 | // Definitions by: Blake Bowen 4 | // Pedro Tavares 5 | // Zach Saucier 6 | // Definitions: https://github.com/greensock/GSAP 7 | 8 | /// 9 | /// 10 | /// 11 | /// 12 | /// 13 | /// 14 | /// 15 | /// 16 | /// 17 | /// 18 | /// 19 | /// 20 | /// 21 | /// 22 | /// 23 | /// 24 | /// 25 | /// 26 | /// 27 | /// 28 | /// 29 | /// 30 | /// 31 | /// 32 | /// 33 | /// 34 | /// 35 | /// 36 | 37 | // Global types 38 | type GSAPDraggableVars = Draggable.Vars; 39 | type GSAPAnimation = gsap.core.Animation; 40 | type GSAPCallback = gsap.Callback; 41 | type GSAPDistributeConfig = gsap.utils.DistributeConfig; 42 | type GSAPPlugin = gsap.Plugin; 43 | type GSAPPluginScope = gsap.PluginScope; 44 | type GSAPPluginStatic = gsap.PluginStatic; 45 | type GSAPStaggerVars = gsap.StaggerVars; 46 | type GSAPTickerCallback = gsap.TickerCallback; 47 | type GSAPTimeline = gsap.core.Timeline; 48 | type GSAPTimelineVars = gsap.TimelineVars; 49 | type GSAPTween = gsap.core.Tween; 50 | type GSAPTweenTarget = gsap.TweenTarget; 51 | type GSAPTweenVars = gsap.TweenVars; 52 | 53 | type GSAP = typeof gsap; 54 | 55 | declare module "gsap" { 56 | export * from "gsap/gsap-core"; 57 | export { gsap as default } from "gsap/gsap-core"; 58 | } 59 | 60 | declare module "gsap/src" { 61 | export * from "gsap"; 62 | export { gsap as default } from "gsap"; 63 | } 64 | 65 | declare module "gsap/src/index" { 66 | export * from "gsap"; 67 | export { gsap as default } from "gsap"; 68 | } 69 | 70 | declare module "gsap/dist" { 71 | export * from "gsap"; 72 | export { gsap as default } from "gsap"; 73 | } 74 | 75 | declare module "gsap/dist/gsap" { 76 | export * from "gsap"; 77 | export { gsap as default } from "gsap"; 78 | } 79 | 80 | declare module "gsap/all" { 81 | export * from "gsap"; 82 | export { gsap as default } from "gsap"; 83 | } 84 | 85 | declare module "gsap/src/all" { 86 | export * from "gsap/all"; 87 | export { gsap as default } from "gsap/all"; 88 | } 89 | -------------------------------------------------------------------------------- /plugins/gsap/types/inertia-plugin.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace gsap { 2 | 3 | type InertiaEndFunction = (value: T) => T; 4 | 5 | interface InertiaDuration { 6 | min?: number; 7 | max?: number; 8 | overshoot?: number; 9 | } 10 | 11 | interface InertiaLinkedProps { 12 | [key: string]: number; 13 | } 14 | 15 | interface InertiaObject { 16 | velocity?: number | "auto"; 17 | min?: number; 18 | max?: number; 19 | end?: number | number[] | InertiaEndFunction; 20 | // end?: number | number[] | InertiaEndFunction | InertiaEndFunction; 21 | } 22 | 23 | type InertiaVars = { 24 | duration?: number | InertiaDuration, 25 | linkedProps?: string, 26 | resistance?: number 27 | } & { 28 | [key: string]: TweenValue | InertiaObject 29 | }; 30 | 31 | interface TweenVars { 32 | inertia?: InertiaVars; 33 | } 34 | } 35 | 36 | declare namespace gsap.plugins { 37 | 38 | interface InertiaPlugin extends Plugin, VelocityTrackerStatic { } 39 | 40 | interface InertiaPluginClass extends InertiaPlugin { 41 | new(): PluginScope & InertiaPlugin; 42 | prototype: PluginScope & InertiaPlugin; 43 | } 44 | 45 | const inertia: InertiaPluginClass; 46 | } 47 | 48 | declare const InertiaPlugin: gsap.plugins.InertiaPlugin; 49 | 50 | declare module "gsap/InertiaPlugin" { 51 | export * from "gsap/utils/VelocityTracker"; 52 | export const InertiaPlugin: gsap.plugins.InertiaPlugin; 53 | export { InertiaPlugin as default }; 54 | } 55 | 56 | declare module "gsap/dist/InertiaPlugin" { 57 | export * from "gsap/InertiaPlugin"; 58 | export { InertiaPlugin as default } from "gsap/InertiaPlugin"; 59 | } 60 | 61 | declare module "gsap/src/InertiaPlugin" { 62 | export * from "gsap/InertiaPlugin"; 63 | export { InertiaPlugin as default } from "gsap/InertiaPlugin"; 64 | } 65 | 66 | declare module "gsap/all" { 67 | export * from "gsap/InertiaPlugin"; 68 | } 69 | -------------------------------------------------------------------------------- /plugins/gsap/types/morph-svg-plugin.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const MorphSVGPlugin: any; 3 | 4 | declare module "gsap/MorphSVGPlugin" { 5 | 6 | // TODO 7 | export const MorphSVGPlugin: any; 8 | export { MorphSVGPlugin as default }; 9 | } 10 | 11 | declare module "gsap/dist/MorphSVGPlugin" { 12 | export * from "gsap/MorphSVGPlugin"; 13 | export { MorphSVGPlugin as default } from "gsap/MorphSVGPlugin"; 14 | } 15 | 16 | declare module "gsap/src/MorphSVGPlugin" { 17 | export * from "gsap/MorphSVGPlugin"; 18 | export { MorphSVGPlugin as default } from "gsap/MorphSVGPlugin"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/MorphSVGPlugin"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/motion-path-helper.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const MotionPathHelper: any; 3 | 4 | declare module "gsap/MotionPathHelper" { 5 | 6 | // TODO 7 | export const MotionPathHelper: any; 8 | export { MotionPathHelper as default }; 9 | } 10 | 11 | declare module "gsap/dist/MotionPathHelper" { 12 | export * from "gsap/MotionPathHelper"; 13 | export { MotionPathHelper as default } from "gsap/MotionPathHelper"; 14 | } 15 | 16 | declare module "gsap/src/MotionPathHelper" { 17 | export * from "gsap/MotionPathHelper"; 18 | export { MotionPathHelper as default } from "gsap/MotionPathHelper"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/MotionPathHelper"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/motion-path-plugin.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const MotionPathPlugin: any; 3 | 4 | declare module "gsap/MotionPathPlugin" { 5 | 6 | // TODO 7 | export const MotionPathPlugin: any; 8 | export { MotionPathPlugin as default }; 9 | } 10 | 11 | declare module "gsap/dist/MotionPathPlugin" { 12 | export * from "gsap/MotionPathPlugin"; 13 | export { MotionPathPlugin as default } from "gsap/MotionPathPlugin"; 14 | } 15 | 16 | declare module "gsap/src/MotionPathPlugin" { 17 | export * from "gsap/MotionPathPlugin"; 18 | export { MotionPathPlugin as default } from "gsap/MotionPathPlugin"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/MotionPathPlugin"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/physics-2d-plugin.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const Physics2DPlugin: any; 3 | 4 | declare module "gsap/Physics2DPlugin" { 5 | 6 | // TODO 7 | export const Physics2DPlugin: any; 8 | export { Physics2DPlugin as default }; 9 | } 10 | 11 | declare module "gsap/dist/Physics2DPlugin" { 12 | export * from "gsap/Physics2DPlugin"; 13 | export { Physics2DPlugin as default } from "gsap/Physics2DPlugin"; 14 | } 15 | 16 | declare module "gsap/src/Physics2DPlugin" { 17 | export * from "gsap/Physics2DPlugin"; 18 | export { Physics2DPlugin as default } from "gsap/Physics2DPlugin"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/Physics2DPlugin"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/physics-props-plugin.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const Physics2PropsPlugin: any; 3 | 4 | declare module "gsap/PhysicsPropsPlugin" { 5 | 6 | // TODO 7 | export const PhysicsPropsPlugin: any; 8 | export { PhysicsPropsPlugin as default }; 9 | } 10 | 11 | declare module "gsap/dist/PhysicsPropsPlugin" { 12 | export * from "gsap/PhysicsPropsPlugin"; 13 | export { PhysicsPropsPlugin as default } from "gsap/PhysicsPropsPlugin"; 14 | } 15 | 16 | declare module "gsap/src/PhysicsPropsPlugin" { 17 | export * from "gsap/PhysicsPropsPlugin"; 18 | export { PhysicsPropsPlugin as default } from "gsap/PhysicsPropsPlugin"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/PhysicsPropsPlugin"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/pixi-plugin.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const PixiPlugin: any; 3 | 4 | declare module "gsap/PixiPlugin" { 5 | 6 | // TODO 7 | export const PixiPlugin: any; 8 | export { PixiPlugin as default }; 9 | } 10 | 11 | declare module "gsap/dist/PixiPlugin" { 12 | export * from "gsap/PixiPlugin"; 13 | export { PixiPlugin as default } from "gsap/PixiPlugin"; 14 | } 15 | 16 | declare module "gsap/src/PixiPlugin" { 17 | export * from "gsap/PixiPlugin"; 18 | export { PixiPlugin as default } from "gsap/PixiPlugin"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/PixiPlugin"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/scramble-text-plugin.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const ScrambleTextPlugin: any; 3 | 4 | declare module "gsap/ScrambleTextPlugin" { 5 | 6 | // TODO 7 | export const ScrambleTextPlugin: any; 8 | export { ScrambleTextPlugin as default }; 9 | } 10 | 11 | declare module "gsap/dist/ScrambleTextPlugin" { 12 | export * from "gsap/ScrambleTextPlugin"; 13 | export { ScrambleTextPlugin as default } from "gsap/ScrambleTextPlugin"; 14 | } 15 | 16 | declare module "gsap/src/ScrambleTextPlugin" { 17 | export * from "gsap/ScrambleTextPlugin"; 18 | export { ScrambleTextPlugin as default } from "gsap/ScrambleTextPlugin"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/ScrambleTextPlugin"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/scroll-to-plugin.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const ScrollToPlugin: any; 3 | 4 | declare module "gsap/ScrollToPlugin" { 5 | 6 | // TODO 7 | export const ScrollToPlugin: any; 8 | export { ScrollToPlugin as default }; 9 | } 10 | 11 | declare module "gsap/dist/ScrollToPlugin" { 12 | export * from "gsap/ScrollToPlugin"; 13 | export { ScrollToPlugin as default } from "gsap/ScrollToPlugin"; 14 | } 15 | 16 | declare module "gsap/src/ScrollToPlugin" { 17 | export * from "gsap/ScrollToPlugin"; 18 | export { ScrollToPlugin as default } from "gsap/ScrollToPlugin"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/ScrollToPlugin"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/split-text.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const SplitText: any; 3 | 4 | declare module "gsap/SplitText" { 5 | 6 | // TODO 7 | export const SplitText: any; 8 | export { SplitText as default }; 9 | } 10 | 11 | declare module "gsap/dist/SplitText" { 12 | export * from "gsap/SplitText"; 13 | export { SplitText as default } from "gsap/SplitText"; 14 | } 15 | 16 | declare module "gsap/src/SplitText" { 17 | export * from "gsap/SplitText"; 18 | export { SplitText as default } from "gsap/SplitText"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/SplitText"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/text-plugin.d.ts: -------------------------------------------------------------------------------- 1 | // TODO 2 | declare const TextPlugin: any; 3 | 4 | declare module "gsap/TextPlugin" { 5 | 6 | // TODO 7 | export const TextPlugin: any; 8 | export { TextPlugin as default }; 9 | } 10 | 11 | declare module "gsap/dist/TextPlugin" { 12 | export * from "gsap/TextPlugin"; 13 | export { TextPlugin as default } from "gsap/TextPlugin"; 14 | } 15 | 16 | declare module "gsap/src/TextPlugin" { 17 | export * from "gsap/TextPlugin"; 18 | export { TextPlugin as default } from "gsap/TextPlugin"; 19 | } 20 | 21 | declare module "gsap/all" { 22 | export * from "gsap/TextPlugin"; 23 | } 24 | -------------------------------------------------------------------------------- /plugins/gsap/types/timeline.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace gsap.core { 2 | 3 | type TimelineChild = string | Animation | Callback | Array; 4 | 5 | interface Labels { 6 | [key: string]: number; 7 | } 8 | 9 | class Timeline extends Animation { 10 | 11 | autoRemoveChildren: boolean; 12 | labels: Labels; 13 | smoothChildTiming: boolean; 14 | vars: TimelineVars; 15 | 16 | constructor(vars?: TimelineVars, time?: number); 17 | 18 | static updateRoot(time: number): void; 19 | 20 | add(child: TimelineChild, position?: Position): this; 21 | addLabel(label: string, position?: Position): this; 22 | addPause(position?: Position, callback?: Callback, params?: any[]): this; 23 | call(callback: Callback, params?: any[], position?: Position): this; 24 | clear(labels?: boolean): this; 25 | currentLabel(value: string): this; 26 | currentLabel(): string; 27 | from(targets: TweenTarget, vars: TweenVars, position?: Position): this; 28 | from(targets: TweenTarget, duration: number, vars: TweenVars, position?: Position): this; 29 | fromTo(targets: TweenTarget, fromVars: TweenVars, toVars: TweenVars, position?: Position): this; 30 | fromTo(targets: TweenTarget, duration: number, fromVars: TweenVars, toVars: TweenVars, position?: Position): this; 31 | getChildren(nested?: boolean, tweens?: boolean, timelines?: boolean, ignoreBeforeTime?: number): Tween[] | Timeline[]; 32 | getTweensOf(targets: TweenTarget, onlyActive?: boolean): Tween[]; 33 | nextLabel(time?: number): string; 34 | previousLabel(time?: number): string; 35 | recent(): T; 36 | remove(value: TimelineChild): this; 37 | removeLabel(label: string): number; 38 | removePause(position: Position): this; 39 | set(target: TweenTarget, vars: TweenVars, position?: Position): this; 40 | shiftChildren(amount: number, adjustLabels?:boolean, ignoreBeforeTime?: number): this; 41 | to(targets: TweenTarget, vars: TweenVars, position?: Position): this; 42 | to(targets: TweenTarget, duration: number, vars: TweenVars, position?: Position): this; 43 | tweenFromTo(fromPosition: Position, toPosition: Position, vars?: TweenVars): Tween; 44 | tweenTo(position: Position, vars?: TweenVars): Tween; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /plugins/gsap/types/tween.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace gsap.core { 2 | 3 | class Tween extends Animation { 4 | 5 | data: any; 6 | vars: TweenVars; 7 | 8 | constructor(targets: TweenTarget, vars: TweenVars, time?: number); 9 | constructor(targets: TweenTarget, duration: number, vars: TweenVars); 10 | 11 | static to(targets: TweenTarget, duration: number, vars: TweenVars): Tween; 12 | static to(targets: TweenTarget, vars: TweenVars): Tween; 13 | static from(targets: TweenTarget, duration: number, vars: TweenVars): Tween; 14 | static from(targets: TweenTarget, vars: TweenVars): Tween; 15 | static fromTo(targets: TweenTarget, duration: number, fromVars: TweenVars, toVars: TweenVars): Tween; 16 | static fromTo(targets: TweenTarget, fromVars: TweenVars, toVars: TweenVars): Tween; 17 | 18 | kill(target?: object, propertiesList?: string): this; 19 | targets(): T[]; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /plugins/gsap/types/utils/velocity-tracker.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace gsap { 2 | 3 | type VelocityType = "num" | "deg" | "rad"; 4 | 5 | interface VelocityMap { 6 | [key: string]: number; 7 | } 8 | 9 | interface VelocityTrackerInstance { 10 | readonly target: object; 11 | add(property: string, type?: VelocityType): void; 12 | kill(shallow?: boolean): void; 13 | remove(property: string): void; 14 | getAll(): VelocityMap; 15 | get(property: string): number; 16 | } 17 | 18 | interface VelocityTrackerStatic { 19 | getByTarget(target: TweenTarget): VelocityTrackerInstance; 20 | getVelocity(target: TweenTarget, property: string): number; 21 | isTracking(target: TweenTarget, property?: string): boolean; 22 | track(target: TweenTarget, properties: string, type?: VelocityType): VelocityTrackerInstance[]; 23 | untrack(target: TweenTarget, properties?: string): void; 24 | } 25 | 26 | interface VelocityTracker extends VelocityTrackerStatic { 27 | new(target: TweenTarget, properties?: string, type?: VelocityType, next?: VelocityTrackerInstance): VelocityTrackerInstance; 28 | prototype: VelocityTrackerInstance; 29 | register(core: typeof gsap): void; 30 | } 31 | } 32 | 33 | declare const VelocityTracker: gsap.VelocityTracker; 34 | 35 | declare module "gsap/utils/VelocityTracker" { 36 | export const VelocityTracker: gsap.VelocityTracker; 37 | export { VelocityTracker as default }; 38 | } 39 | 40 | declare module "gsap/src/utils/VelocityTracker" { 41 | export * from "gsap/utils/VelocityTracker"; 42 | export { VelocityTracker as default } from "gsap/utils/VelocityTracker"; 43 | } 44 | -------------------------------------------------------------------------------- /sanity.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "project": { 4 | "name": "Egstad.com" 5 | }, 6 | "api": { 7 | "projectId": "sjl79kwi", 8 | "dataset": "production" 9 | }, 10 | "plugins": [ 11 | "@sanity/base", 12 | "@sanity/components", 13 | "@sanity/default-layout", 14 | "@sanity/default-login", 15 | "@sanity/desk-tool", 16 | "media" 17 | ], 18 | "env": { 19 | "development": { 20 | "plugins": [ 21 | "@sanity/vision" 22 | ] 23 | } 24 | }, 25 | "parts": [ 26 | { 27 | "name": "part:@sanity/base/schema", 28 | "path": "./schemas/schema" 29 | } 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /static/egg/head.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/egg/head.jpg -------------------------------------------------------------------------------- /static/egg/vid.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/egg/vid.mp4 -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/favicon.ico -------------------------------------------------------------------------------- /static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/icon.png -------------------------------------------------------------------------------- /static/memer/boomer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/memer/boomer.jpg -------------------------------------------------------------------------------- /static/memer/coffee.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/memer/coffee.jpg -------------------------------------------------------------------------------- /static/memer/covid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/memer/covid.jpg -------------------------------------------------------------------------------- /static/memer/cuddle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/memer/cuddle.jpg -------------------------------------------------------------------------------- /static/memer/finger.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/memer/finger.jpg -------------------------------------------------------------------------------- /static/memer/hair.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/memer/hair.jpg -------------------------------------------------------------------------------- /static/memer/hat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/memer/hat.jpg -------------------------------------------------------------------------------- /static/memer/rudolf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/memer/rudolf.jpg -------------------------------------------------------------------------------- /static/mp3/click.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/egstad/dotcom-frontend/6b93057d089d81953beeb6b1f517e06dc75c9b9d/static/mp3/click.mp3 -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /store/device.js: -------------------------------------------------------------------------------- 1 | export const state = () => ({ 2 | isTouch: null, 3 | isCursor: null, 4 | isMobile: null, 5 | winWidth: null, 6 | winHeight: null, 7 | docWidth: null, 8 | docHeight: null, 9 | hideAnimations: false, 10 | preferredTheme: null, 11 | dpi: null, 12 | isScrolling: null, 13 | scrollDirection: undefined, 14 | breakpoint: null, 15 | cssVars: null 16 | }) 17 | 18 | export const mutations = { 19 | setPreferredTheme(state, boolean) { 20 | state.preferredTheme = boolean 21 | }, 22 | setPrefersReducedMotion(state, boolean) { 23 | state.hideAnimations = boolean 24 | }, 25 | setDimensions(state, val) { 26 | state.winWidth = val.winWidth 27 | state.winHeight = val.winHeight 28 | state.docWidth = val.docWidth 29 | state.docHeight = val.docHeight 30 | }, 31 | setDevice(state, val) { 32 | state.isTouch = val.isTouch 33 | state.isCursor = val.isCursor 34 | state.isMobile = val.isMobile 35 | state.dpi = val.dpi 36 | }, 37 | setScrollingState(state, boolean) { 38 | state.isScrolling = boolean 39 | }, 40 | setScrollingDirection(state, val) { 41 | state.scrollDirection = val 42 | }, 43 | setBreakpoint(state, val) { 44 | state.breakpoint = val 45 | }, 46 | setGlobalCssVars(state, val) { 47 | state.cssVars = val 48 | } 49 | } 50 | 51 | export const actions = { 52 | updateScrollDirection({ commit }, direction) { 53 | let eventName = null 54 | 55 | switch (direction) { 56 | case 'up': 57 | eventName = 'scrollUp' 58 | break 59 | 60 | case 'down': 61 | eventName = 'scrollDown' 62 | break 63 | 64 | default: 65 | break 66 | } 67 | 68 | window.$nuxt.$emit(`window::${eventName}`) 69 | commit('setScrollingDirection', direction) 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /store/index.js: -------------------------------------------------------------------------------- 1 | import ThemeChanger from '@/plugins/ThemeChanger' 2 | // import device from 3 | 4 | // const device = require('@/plugins/Device.client.js') 5 | 6 | export const state = () => ({ 7 | layoutHasMounted: null, 8 | isTransitioning: null, 9 | activeNavigationRoute: null, 10 | headerIsVisible: false, 11 | menuIsOpen: false, 12 | menuIsTransitioning: false, 13 | filterIsVisible: null, 14 | cssVars: null 15 | }) 16 | 17 | export const mutations = { 18 | layoutHasMounted(state, val) { 19 | state.layoutHasMounted = val 20 | }, 21 | setCSSVars(state, val) { 22 | state.cssVars = ThemeChanger.set(val) 23 | }, 24 | setIsTransitioning(state, val) { 25 | state.isTransitioning = val 26 | }, 27 | setActiveNavigationRoute(state, val) { 28 | state.activeNavigationRoute = val 29 | }, 30 | setFilterVisibility(state, val) { 31 | state.filterIsVisible = val 32 | }, 33 | setHeaderVisibility(state, val) { 34 | state.headerIsVisible = val 35 | }, 36 | setMenuVisibility(state, val) { 37 | state.menuIsOpen = val 38 | }, 39 | setMenuTransitionState(state, val) { 40 | state.menuIsTransitioning = val 41 | } 42 | } 43 | 44 | export const actions = { 45 | setNavigationColors(context) { 46 | // if (process.client) console.log(window.$nuxt.) 47 | }, 48 | nuxtServerInit(context, { req }) { 49 | // if (process.client) device.init() 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /store/navigation.js: -------------------------------------------------------------------------------- 1 | export const state = () => ({ 2 | primary: null 3 | }) 4 | 5 | export const mutations = { 6 | setPrimary(state, links) { 7 | state.primary = links 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // add your custom config here 3 | // https://stylelint.io/user-guide/configuration 4 | rules: {} 5 | } 6 | --------------------------------------------------------------------------------