├── README.md ├── .gitignore ├── README.markdown ├── src ├── index.partial.html ├── index.template.html ├── style.scss └── script.js ├── backup ├── src │ ├── index.partial.html │ ├── script.js │ ├── index.template.html │ └── style.scss └── dist │ ├── script.js │ ├── index.html │ └── style.css ├── docs ├── index.html ├── style.css └── script.js ├── package.json └── DOCUMENTATION.markdown /README.md: -------------------------------------------------------------------------------- 1 | speaker-title-animation 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | # Speaker\Title Animation 2 | 3 | A Pen created on CodePen.io. Original URL: [https://codepen.io/neilkalman/pen/3c0fe183c1c066ef929cd3a5d2e0420d](https://codepen.io/neilkalman/pen/3c0fe183c1c066ef929cd3a5d2e0420d). 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/index.partial.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
-------------------------------------------------------------------------------- /backup/src/index.partial.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
Among Us Gang
7 |
8 |
9 |
@thatkookooguy
10 | 11 |
12 |
-------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Stream Spearker\Title Animation 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /backup/dist/script.js: -------------------------------------------------------------------------------- 1 | const tl = gsap.timeline({ 2 | onComplete: hideTitle 3 | }); 4 | 5 | tl.delay(1) 6 | .to(".ball", { 7 | duration: 0.5, 8 | ease: Elastic.easeOut.config(1, 0.3), 9 | css: { 10 | width: "0.5em", 11 | height: "0.5em" 12 | } 13 | }) 14 | .to(".ball", { 15 | duration: 0.2, 16 | css: { 17 | borderRadius: "0", 18 | height: "100%" 19 | } 20 | }) 21 | .to( 22 | ".words", 23 | { 24 | duration: 1, 25 | stagger: 0.2, 26 | css: { 27 | width: "auto" 28 | } 29 | }, 30 | ">-0.1" 31 | ); 32 | // gsap.to(".ball", { 33 | // duration: 1, 34 | // css: { 35 | // borderRadius: "0" 36 | // } 37 | // }); 38 | // gsap.to(".ball", { 39 | // duration: 0.5, 40 | // css: { 41 | // height: "100%" 42 | // } 43 | // }); 44 | 45 | function hideTitle() { 46 | setTimeout(() => tl.reverse(), 3000); 47 | } -------------------------------------------------------------------------------- /backup/src/script.js: -------------------------------------------------------------------------------- 1 | const tl = gsap.timeline({ 2 | onComplete: hideTitle 3 | }); 4 | 5 | tl.delay(1) 6 | .to(".ball", { 7 | duration: 0.5, 8 | ease: Elastic.easeOut.config(1, 0.3), 9 | css: { 10 | width: "0.5em", 11 | height: "0.5em" 12 | } 13 | }) 14 | .to(".ball", { 15 | duration: 0.2, 16 | css: { 17 | borderRadius: "0", 18 | height: "100%" 19 | } 20 | }) 21 | .to( 22 | ".words", 23 | { 24 | duration: 1, 25 | stagger: 0.2, 26 | css: { 27 | width: "auto" 28 | } 29 | }, 30 | ">-0.1" 31 | ); 32 | // gsap.to(".ball", { 33 | // duration: 1, 34 | // css: { 35 | // borderRadius: "0" 36 | // } 37 | // }); 38 | // gsap.to(".ball", { 39 | // duration: 0.5, 40 | // css: { 41 | // height: "100%" 42 | // } 43 | // }); 44 | 45 | function hideTitle() { 46 | setTimeout(() => tl.reverse(), 3000); 47 | } 48 | -------------------------------------------------------------------------------- /backup/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - Speaker\Title Animation 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
Among Us Gang
17 |
18 |
19 |
@thatkookooguy
20 | 21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /backup/src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - Speaker\Title Animation 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
Among Us Gang
17 |
18 |
19 |
@thatkookooguy
20 | 21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Stream Spearker\Title Animation 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
Among Us Gang
17 |
18 |
19 |
@thatkookooguy
20 | 21 |
22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /backup/dist/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | width: 100%; 4 | height: 100%; 5 | overflow: hidden; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | body { 11 | background: #212121; 12 | color: white; 13 | font-family: "Comfortaa", cursive; 14 | display: flex; 15 | align-items: flex-end; 16 | font-size: 3em; 17 | } 18 | 19 | .title { 20 | width: 100%; 21 | position: relative; 22 | padding: 0 0.9em; 23 | overflow: hidden; 24 | margin: 0.3em 0; 25 | } 26 | .title .words { 27 | overflow: hidden; 28 | width: 0; 29 | } 30 | 31 | .title-word { 32 | width: 100vw; 33 | font-weight: 300; 34 | font-size: 0.8em; 35 | } 36 | .title-word.main { 37 | font-size: 1em; 38 | font-weight: bold; 39 | } 40 | 41 | .bar-animation { 42 | position: absolute; 43 | top: 0; 44 | bottom: 0; 45 | left: 0; 46 | width: 0.9em; 47 | } 48 | .bar-animation .ball { 49 | position: absolute; 50 | top: 0; 51 | bottom: 0; 52 | left: 0; 53 | right: 0; 54 | background: #ffdd57; 55 | width: 0.5em; 56 | height: 0.5em; 57 | width: 0; 58 | height: 0; 59 | border-radius: 50%; 60 | margin: auto; 61 | } -------------------------------------------------------------------------------- /backup/src/style.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | width: 100%; 4 | height: 100%; 5 | overflow: hidden; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | body { 11 | background: #212121; 12 | // background: transparent; 13 | color: white; 14 | font-family: "Comfortaa", cursive; 15 | 16 | display: flex; 17 | align-items: flex-end; 18 | // justify-content: center; 19 | font-size: 3em; 20 | } 21 | 22 | .title { 23 | // display: none; 24 | width: 100%; 25 | position: relative; 26 | padding: 0 0.9em; 27 | overflow: hidden; 28 | margin: 0.3em 0; 29 | 30 | .words { 31 | overflow: hidden; 32 | width: 0; 33 | } 34 | } 35 | 36 | .title-word { 37 | width: 100vw; 38 | font-weight: 300; 39 | font-size: 0.8em; 40 | &.main { 41 | font-size: 1em; 42 | font-weight: bold; 43 | } 44 | } 45 | 46 | .bar-animation { 47 | position: absolute; 48 | top: 0; 49 | bottom: 0; 50 | left: 0; 51 | width: 0.9em; 52 | // background: pink; 53 | 54 | .ball { 55 | position: absolute; 56 | top: 0; 57 | bottom: 0; 58 | left: 0; 59 | right: 0; 60 | // background: #db8a74; 61 | background: hsl(48, 100%, 67%); 62 | width: 0.5em; 63 | height: 0.5em; 64 | width: 0; 65 | height: 0; 66 | border-radius: 50%; 67 | margin: auto; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /docs/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | width: 100%; 4 | height: 100%; 5 | overflow: hidden; 6 | margin: 0; 7 | padding: 0; } 8 | 9 | body { 10 | --background-color: transparent; 11 | --text-color: white; 12 | background: var(--background-color); 13 | color: var(--text-color); 14 | font-family: "Comfortaa", cursive; 15 | display: flex; 16 | align-items: flex-end; 17 | font-size: 3em; } 18 | body.background { 19 | --background-color: #212121; } 20 | body.light.background { 21 | --background-color: white; 22 | --text-color: black; } 23 | 24 | .title { 25 | width: 100%; 26 | position: relative; 27 | padding: 0 0.9em; 28 | overflow: hidden; 29 | margin: 0.3em 0; } 30 | .title .words { 31 | overflow: hidden; 32 | width: 0; } 33 | 34 | .title-word { 35 | width: 100vw; 36 | font-weight: 300; 37 | font-size: 0.6em; } 38 | .title-word.main { 39 | font-size: 1em; 40 | font-weight: bold; } 41 | 42 | .bar-animation { 43 | position: absolute; 44 | top: 0; 45 | bottom: 0; 46 | left: 0; 47 | width: 0.9em; } 48 | .bar-animation .ball { 49 | position: absolute; 50 | top: 0; 51 | bottom: 0; 52 | left: 0; 53 | right: 0; 54 | background-color: #ffdd57; 55 | width: 0.5em; 56 | height: 0.5em; 57 | width: 0; 58 | height: 0; 59 | border-radius: 50%; 60 | margin: auto; 61 | background-size: cover; } 62 | -------------------------------------------------------------------------------- /src/style.scss: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | width: 100%; 4 | height: 100%; 5 | overflow: hidden; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | body { 11 | --background-color: transparent; 12 | --text-color: white; 13 | 14 | background: var(--background-color); 15 | color: var(--text-color); 16 | font-family: "Comfortaa", cursive; 17 | 18 | display: flex; 19 | align-items: flex-end; 20 | font-size: 3em; 21 | 22 | &.background { 23 | --background-color: #212121; 24 | } 25 | 26 | &.light.background { 27 | --background-color: white; 28 | --text-color: black; 29 | } 30 | 31 | &.img .ball { 32 | // box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 33 | } 34 | } 35 | 36 | .title { 37 | width: 100%; 38 | position: relative; 39 | padding: 0 0.9em; 40 | overflow: hidden; 41 | margin: 0.3em 0; 42 | 43 | .words { 44 | overflow: hidden; 45 | width: 0; 46 | } 47 | } 48 | 49 | .title-word { 50 | width: 100vw; 51 | font-weight: 300; 52 | font-size: 0.6em; 53 | &.main { 54 | font-size: 1em; 55 | font-weight: bold; 56 | } 57 | } 58 | 59 | .bar-animation { 60 | position: absolute; 61 | top: 0; 62 | bottom: 0; 63 | left: 0; 64 | width: 0.9em; 65 | 66 | .ball { 67 | position: absolute; 68 | top: 0; 69 | bottom: 0; 70 | left: 0; 71 | right: 0; 72 | // background: #db8a74; 73 | background-color: hsl(48, 100%, 67%); 74 | width: 0.5em; 75 | height: 0.5em; 76 | width: 0; 77 | height: 0; 78 | border-radius: 50%; 79 | margin: auto; 80 | background-size: cover; 81 | // background-position: center; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "speaker-title-animation", 3 | "version": "2020.9.1-1.6.1", 4 | "private": true, 5 | "license": "UNLICENSED", 6 | "homepage": "https://codepen.io/neilkalman/pen/3c0fe183c1c066ef929cd3a5d2e0420d", 7 | "scripts": { 8 | "build": "gulp -f ./build/gulpfile.js --cwd ./ --continue", 9 | "serve": "gulp serve -f ./build/gulpfile.js --cwd ./ --continue", 10 | "task": "gulp -f ./build/gulpfile.js --cwd ./ --continue", 11 | "tasks": "gulp --tasks-simple -f ./build/gulpfile.js --cwd ./ --continue" 12 | }, 13 | "config": { 14 | "srcDir": "src/", 15 | "distDir": "docs/" 16 | }, 17 | "devDependencies": { 18 | "browser-sync": "^2.26.7", 19 | "del": "^4.1.1", 20 | "glob": "^7.1.4", 21 | "gulp": "^4.0.2", 22 | "gulp-rename": "^1.4.0", 23 | "webpack": "^4.29.6", 24 | "webpack-cli": "^3.2.3", 25 | "webpack-dev-server": "^3.2.1", 26 | "gulp-inject-partials": "^1.0.5", 27 | "gulp-sass": "^4.0.2", 28 | "node-sass": "^4.12.0" 29 | }, 30 | "tasks": { 31 | "partials": { 32 | "order": 999, 33 | "src": [ 34 | "**/*.template.html" 35 | ], 36 | "pipe": [ 37 | { 38 | "require": "gulp-inject-partials", 39 | "args": [ 40 | { 41 | "removeTags": true, 42 | "quiet": true, 43 | "ignoreError": true 44 | } 45 | ] 46 | } 47 | ], 48 | "rename": { 49 | "find": ".template", 50 | "replace": "" 51 | }, 52 | "cleanup": [ 53 | "**/*.partial.html", 54 | "**/*.template.html" 55 | ] 56 | }, 57 | "sass": { 58 | "src": [ 59 | "**/*.sass", 60 | "**/*.scss" 61 | ], 62 | "pipe": [ 63 | { 64 | "require": "gulp-sass" 65 | } 66 | ], 67 | "cleanup": true 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /DOCUMENTATION.markdown: -------------------------------------------------------------------------------- 1 | # CodePen Export with Build Process 2 | _Transform raw code into a browser-ready preview... offline_ 3 | 4 | This package contains all of the original code ([src/](./src/)), the original in-browser preview ([/backup/dist](./backup/dist)), and a custom build script with preprocessors. You'll be able to edit and build for a local CodePen-like experience. 5 | 6 | ## Installation 7 | 8 | Ensure you have a recent version of [node & npm](https://nodejs.org/en/download/) or [yarn](https://yarnpkg.com/en/docs/install) installed. 9 | 10 | All of the following steps run on the command line within this directory. You can substitute `npm` for `yarn` depending on your preferences. 11 | 12 | Install all the necessary packages: 13 | 14 | ``` 15 | npm install 16 | ``` 17 | 18 | ## Build 19 | 20 | To build for distribution: 21 | 22 | ``` 23 | npm run build 24 | ``` 25 | 26 | All of the final output will be dropped into the [/dist/](./dist) folder. 27 | 28 | ## Server 29 | 30 | Run a local server that will automatically compile your code & refresh when you save a change! 31 | 32 | ``` 33 | npm run serve 34 | ``` 35 | 36 | --- 37 | 38 | ## Folder Structure 39 | 40 | ``` 41 | /exported-item/ 42 | |-- /build/ - Build scripts 43 | | |-- gulpfile.js - The tasks for the main build process 44 | | |-- util.js - Utilities used by the tasks 45 | | 46 | |-- /src/ - Your code 47 | | |-- index.template.html - The wrapper around your compiled HTML that includes any external stylesheets and scripts 48 | | |-- index.partial.(html|pug|haml|...) - The raw HTML input or preprocessor equivalent 49 | | |-- style.(css|scss|less|...) - The raw CSS input, or preprocessor equivalent 50 | | |-- script.(js|ts|coffee|...) - The raw JavaScript input, or preprocessor equivalent 51 | | 52 | |-- /dist/ - The compiled output after running `npm run build` 53 | | |-- index.html 54 | | |-- script.js 55 | | |-- style.css 56 | | 57 | |-- /backup/ - Backup copy of the original code and in-browser preview from CodePen 58 | | |-- /dist/ 59 | | |-- /src/ 60 | ``` -------------------------------------------------------------------------------- /src/script.js: -------------------------------------------------------------------------------- 1 | const background = getParameterByName('background'); 2 | const theme = getParameterByName('theme'); 3 | const title = getParameterByName('title'); 4 | const subtitle = getParameterByName('subtitle'); 5 | const img = getParameterByName('img'); 6 | 7 | const lineColors = { 8 | yellow: 'hsl(48, 100%, 67%)', 9 | yellowAgain: 'hsl(48, 100%, 67%)', 10 | red: 'hsl(348, 100%, 61%)', 11 | blue: 'hsl(204, 86%, 53%)' 12 | }; 13 | 14 | if (background) { 15 | document.body.classList.add('background'); 16 | } 17 | 18 | if (theme === 'light') { 19 | document.body.classList.add('light'); 20 | } 21 | 22 | document.body.querySelector('#ball').style = `background: ${ _.sample(lineColors) }`; 23 | 24 | if (img) { 25 | document.body.classList.add('img'); 26 | document.body.querySelector('#ball').style = `background-image: url(${ img })`; 27 | } 28 | 29 | document.body.querySelector('#title').innerHTML = title || 'Among Us Gang'; 30 | document.body.querySelector('#subtitle').innerHTML = subtitle || '@thatkookooguy'; 31 | 32 | const tl = gsap.timeline({ 33 | onComplete: hideTitle 34 | }); 35 | 36 | tl.delay(1) 37 | .to(".ball", { 38 | duration: 0.6, 39 | ease: Elastic.easeOut.config(1.5, 0.5), 40 | css: { 41 | width: "0.5em", 42 | height: "0.5em" 43 | } 44 | }) 45 | .to(".ball", { 46 | duration: 0.2, 47 | css: { 48 | borderRadius: "0", 49 | height: "100%" 50 | } 51 | }) 52 | .to( 53 | ".words", 54 | { 55 | duration: 1, 56 | stagger: 0.2, 57 | css: { 58 | width: "auto" 59 | } 60 | }, 61 | ">-0.1" 62 | ); 63 | // gsap.to(".ball", { 64 | // duration: 1, 65 | // css: { 66 | // borderRadius: "0" 67 | // } 68 | // }); 69 | // gsap.to(".ball", { 70 | // duration: 0.5, 71 | // css: { 72 | // height: "100%" 73 | // } 74 | // }); 75 | 76 | function hideTitle() { 77 | setTimeout(() => tl.reverse(), 3000); 78 | } 79 | 80 | function getParameterByName (name, url) { 81 | if (!url) url = window.location.href; 82 | name = name.replace(/[[]]/g, '\\$&'); 83 | const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'); 84 | const results = regex.exec(url); 85 | if (!results) return null; 86 | if (!results[2]) return ''; 87 | return decodeURIComponent(results[2].replace(/\+/g, ' ')); 88 | } -------------------------------------------------------------------------------- /docs/script.js: -------------------------------------------------------------------------------- 1 | const background = getParameterByName('background'); 2 | const lineColor = getParameterByName('line'); 3 | const theme = getParameterByName('theme'); 4 | const title = getParameterByName('title'); 5 | const subtitle = getParameterByName('subtitle'); 6 | const img = getParameterByName('img'); 7 | 8 | const lineColors = { 9 | yellow: 'hsl(48, 100%, 67%)', 10 | yellowAgain: 'hsl(48, 100%, 67%)', 11 | red: 'hsl(348, 100%, 61%)', 12 | blue: 'hsl(204, 86%, 53%)' 13 | }; 14 | 15 | if (background) { 16 | document.body.classList.add('background'); 17 | } 18 | 19 | if (theme === 'light') { 20 | document.body.classList.add('light'); 21 | } 22 | 23 | document.body.querySelector('#ball').style = `background-color: ${ lineColor || _.sample(lineColors) }`; 24 | 25 | if (img) { 26 | document.body.classList.add('img'); 27 | document.body.querySelector('#ball').style = `background-image: url(${ img })`; 28 | } 29 | 30 | document.body.querySelector('#title').innerHTML = title || 'Among Us Gang'; 31 | document.body.querySelector('#subtitle').innerHTML = subtitle || '@thatkookooguy'; 32 | 33 | const tl = gsap.timeline({ 34 | onComplete: hideTitle 35 | }); 36 | 37 | tl.delay(1) 38 | .to(".ball", { 39 | duration: 0.6, 40 | ease: Elastic.easeOut.config(1.5, 0.5), 41 | css: { 42 | width: "0.5em", 43 | height: "0.5em" 44 | } 45 | }) 46 | .to(".ball", { 47 | duration: 0.2, 48 | css: { 49 | borderRadius: "0", 50 | height: "100%" 51 | } 52 | }) 53 | .to( 54 | ".words", 55 | { 56 | duration: 1, 57 | stagger: 0.2, 58 | css: { 59 | width: "auto" 60 | } 61 | }, 62 | ">-0.1" 63 | ); 64 | // gsap.to(".ball", { 65 | // duration: 1, 66 | // css: { 67 | // borderRadius: "0" 68 | // } 69 | // }); 70 | // gsap.to(".ball", { 71 | // duration: 0.5, 72 | // css: { 73 | // height: "100%" 74 | // } 75 | // }); 76 | 77 | function hideTitle() { 78 | setTimeout(() => tl.reverse(), 3000); 79 | } 80 | 81 | function getParameterByName (name, url) { 82 | if (!url) url = window.location.href; 83 | name = name.replace(/[[]]/g, '\\$&'); 84 | const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'); 85 | const results = regex.exec(url); 86 | if (!results) return null; 87 | if (!results[2]) return ''; 88 | return decodeURIComponent(results[2].replace(/\+/g, ' ')); 89 | } 90 | --------------------------------------------------------------------------------