├── .gitignore ├── README.md ├── babel.config.js ├── demo.gif ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── bohemia.jpg │ ├── guru.jpg │ ├── icons │ │ └── heart.svg │ ├── jassmanak.jpg │ ├── jazzyb.jpg │ ├── nimmi.jpg │ ├── rihanna.jpg │ ├── sukhe.jpg │ └── tracks │ │ └── recent │ │ ├── all-black.jpg │ │ ├── diamonds.jpg │ │ ├── gallan.jpg │ │ ├── jaani.jpg │ │ ├── needya.jpg │ │ ├── only.jpg │ │ ├── rehab.jpg │ │ ├── suicide.jpg │ │ ├── work.jpg │ │ └── you-da-one.jpg ├── components │ ├── ArtistHeader.vue │ ├── Artists.vue │ ├── Category.vue │ ├── Player.vue │ ├── Playlists.vue │ ├── Popular.vue │ ├── Recent.vue │ ├── Sidebar.vue │ └── Tracks.vue ├── data │ ├── artists.json │ └── tracks.json ├── main.js ├── router.js └── styles │ └── base.scss ├── vue.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Animations Demo 2 | 3 | This is a music player app built using [Vue.js](https://vuejs.org/). This demo is made for the article [Writing Animations That Bring Your Site to Life](https://css-tricks.com/writing-animations-that-bring-your-site-to-life) pubslished on CSS-Tricks. 4 | 5 | Ckeckout live! https://pb03.github.io/css-animations-demo/ 6 | 7 | ![Demo](https://github.com/pb03/css-animations-demo/raw/master/demo.gif) 8 | 9 | ### Project setup 10 | ``` 11 | yarn install 12 | ``` 13 | 14 | #### Compiles and hot-reloads for development 15 | ``` 16 | yarn run serve 17 | ``` 18 | 19 | #### Compiles and minifies for production 20 | ``` 21 | yarn run build 22 | ``` 23 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/demo.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-animations-demo", 3 | "version": "0.1.0", 4 | "description": "Music app demo", 5 | "author": "Prasanjit Singh (https://prasanjit.com)", 6 | "private": true, 7 | "scripts": { 8 | "serve": "vue-cli-service serve", 9 | "build": "vue-cli-service build", 10 | "lint": "vue-cli-service lint" 11 | }, 12 | "dependencies": { 13 | "vue": "^2.5.17", 14 | "vue-router": "^3.0.2" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^3.2.0", 18 | "@vue/cli-plugin-eslint": "^3.2.0", 19 | "@vue/cli-service": "^3.2.0", 20 | "babel-eslint": "^10.0.1", 21 | "eslint": "^5.8.0", 22 | "eslint-plugin-vue": "^5.0.0-0", 23 | "node-sass": "^4.11.0", 24 | "sass-loader": "^7.1.0", 25 | "vue-template-compiler": "^2.5.17" 26 | }, 27 | "eslintConfig": { 28 | "root": true, 29 | "env": { 30 | "node": true 31 | }, 32 | "extends": [ 33 | "plugin:vue/essential", 34 | "eslint:recommended" 35 | ], 36 | "rules": {}, 37 | "parserOptions": { 38 | "parser": "babel-eslint" 39 | } 40 | }, 41 | "postcss": { 42 | "plugins": { 43 | "autoprefixer": {} 44 | } 45 | }, 46 | "browserslist": [ 47 | "> 1%", 48 | "last 2 versions", 49 | "not ie <= 8" 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animations Demo 9 | 10 | 11 | 12 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 62 | 63 | 91 | -------------------------------------------------------------------------------- /src/assets/bohemia.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/bohemia.jpg -------------------------------------------------------------------------------- /src/assets/guru.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/guru.jpg -------------------------------------------------------------------------------- /src/assets/icons/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/jassmanak.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/jassmanak.jpg -------------------------------------------------------------------------------- /src/assets/jazzyb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/jazzyb.jpg -------------------------------------------------------------------------------- /src/assets/nimmi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/nimmi.jpg -------------------------------------------------------------------------------- /src/assets/rihanna.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/rihanna.jpg -------------------------------------------------------------------------------- /src/assets/sukhe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/sukhe.jpg -------------------------------------------------------------------------------- /src/assets/tracks/recent/all-black.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/tracks/recent/all-black.jpg -------------------------------------------------------------------------------- /src/assets/tracks/recent/diamonds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/tracks/recent/diamonds.jpg -------------------------------------------------------------------------------- /src/assets/tracks/recent/gallan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/tracks/recent/gallan.jpg -------------------------------------------------------------------------------- /src/assets/tracks/recent/jaani.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/tracks/recent/jaani.jpg -------------------------------------------------------------------------------- /src/assets/tracks/recent/needya.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/tracks/recent/needya.jpg -------------------------------------------------------------------------------- /src/assets/tracks/recent/only.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/tracks/recent/only.jpg -------------------------------------------------------------------------------- /src/assets/tracks/recent/rehab.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/tracks/recent/rehab.jpg -------------------------------------------------------------------------------- /src/assets/tracks/recent/suicide.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/tracks/recent/suicide.jpg -------------------------------------------------------------------------------- /src/assets/tracks/recent/work.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/tracks/recent/work.jpg -------------------------------------------------------------------------------- /src/assets/tracks/recent/you-da-one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pb03/css-animations-demo/d3bf29eb961f9e2fad32c43b60754df4479a7189/src/assets/tracks/recent/you-da-one.jpg -------------------------------------------------------------------------------- /src/components/ArtistHeader.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 58 | 59 | 179 | -------------------------------------------------------------------------------- /src/components/Artists.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 41 | 42 | 78 | -------------------------------------------------------------------------------- /src/components/Category.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 51 | 52 | 184 | -------------------------------------------------------------------------------- /src/components/Player.vue: -------------------------------------------------------------------------------- 1 | 59 | 60 | 125 | 126 | 127 | 372 | -------------------------------------------------------------------------------- /src/components/Playlists.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 28 | 29 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /src/components/Popular.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 36 | 37 | 81 | -------------------------------------------------------------------------------- /src/components/Recent.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | 31 | 84 | -------------------------------------------------------------------------------- /src/components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 64 | 65 | 127 | -------------------------------------------------------------------------------- /src/components/Tracks.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 50 | 51 | 123 | -------------------------------------------------------------------------------- /src/data/artists.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1, 4 | "name": "Rihanna", 5 | "image": "rihanna.jpg", 6 | "category": "Hip Hop, R&B" 7 | }, 8 | { 9 | "id": 2, 10 | "name": "Sukh E", 11 | "image": "sukhe.jpg", 12 | "category": "Pop singer" 13 | }, 14 | { 15 | "id": 3, 16 | "name": "Jass Manak", 17 | "image": "jassmanak.jpg", 18 | "category": "Pop singer" 19 | }, 20 | { 21 | "id": 4, 22 | "name": "Bohemia", 23 | "image": "bohemia.jpg", 24 | "category": "Rapper" 25 | }, 26 | { 27 | "id": 5, 28 | "name": "Jazzy B", 29 | "image": "jazzyb.jpg", 30 | "category": "Pop singer" 31 | }, 32 | { 33 | "id": 6, 34 | "name": "Guru Randhawa", 35 | "image": "guru.jpg", 36 | "category": "Hip Hop" 37 | } 38 | ] 39 | -------------------------------------------------------------------------------- /src/data/tracks.json: -------------------------------------------------------------------------------- 1 | { 2 | "1": { 3 | "recent": [ 4 | { 5 | "id": 1, 6 | "title": "Only Girl", 7 | "album": "Loud", 8 | "duration": 163, 9 | "image": "only.jpg" 10 | }, 11 | { 12 | "id": 2, 13 | "title": "You Da One", 14 | "album": "Talk That Talk", 15 | "duration": 140, 16 | "image": "you-da-one.jpg" 17 | }, 18 | { 19 | "id": 3, 20 | "title": "Diamonds", 21 | "album": "Diamonds", 22 | "duration": 155, 23 | "image": "diamonds.jpg" 24 | }, 25 | { 26 | "id": 5, 27 | "title": "Work", 28 | "album": "ANTI", 29 | "duration": 167, 30 | "image": "work.jpg" 31 | }, 32 | { 33 | "id": 4, 34 | "title": "Rehab", 35 | "album": "Good Girl Gone Bad", 36 | "duration": 171, 37 | "image": "rehab.jpg" 38 | } 39 | ] 40 | }, 41 | "2": { 42 | "recent": [ 43 | { 44 | "id": 1, 45 | "title": "All Black", 46 | "album": "All Black", 47 | "duration": 163, 48 | "image": "all-black.jpg" 49 | }, 50 | { 51 | "id": 2, 52 | "title": "Suicide", 53 | "album": "Suicide", 54 | "duration": 140, 55 | "image": "suicide.jpg" 56 | }, 57 | { 58 | "id": 3, 59 | "title": "Jaani", 60 | "album": "Jaani Tera Naa", 61 | "duration": 155, 62 | "image": "jaani.jpg" 63 | }, 64 | { 65 | "id": 5, 66 | "title": "I Need Ya", 67 | "album": "I Need Ya", 68 | "duration": 167, 69 | "image": "needya.jpg" 70 | }, 71 | { 72 | "id": 4, 73 | "title": "Gallan Terian", 74 | "album": "Qismat", 75 | "duration": 171, 76 | "image": "gallan.jpg" 77 | } 78 | ] 79 | }, 80 | "3": { 81 | "recent": [ 82 | { 83 | "id": 1, 84 | "title": "All Black", 85 | "album": "All Black", 86 | "duration": 163, 87 | "image": "all-black.jpg" 88 | }, 89 | { 90 | "id": 2, 91 | "title": "Suicide", 92 | "album": "Suicide", 93 | "duration": 140, 94 | "image": "suicide.jpg" 95 | }, 96 | { 97 | "id": 3, 98 | "title": "Jaani", 99 | "album": "Jaani Tera Naa", 100 | "duration": 155, 101 | "image": "jaani.jpg" 102 | }, 103 | { 104 | "id": 5, 105 | "title": "I Need Ya", 106 | "album": "I Need Ya", 107 | "duration": 167, 108 | "image": "needya.jpg" 109 | }, 110 | { 111 | "id": 4, 112 | "title": "Gallan Terian", 113 | "album": "Qismat", 114 | "duration": 171, 115 | "image": "gallan.jpg" 116 | } 117 | ] 118 | }, 119 | "4": { 120 | "recent": [ 121 | { 122 | "id": 1, 123 | "title": "All Black", 124 | "album": "All Black", 125 | "duration": 163, 126 | "image": "all-black.jpg" 127 | }, 128 | { 129 | "id": 2, 130 | "title": "Suicide", 131 | "album": "Suicide", 132 | "duration": 140, 133 | "image": "suicide.jpg" 134 | }, 135 | { 136 | "id": 3, 137 | "title": "Jaani", 138 | "album": "Jaani Tera Naa", 139 | "duration": 155, 140 | "image": "jaani.jpg" 141 | }, 142 | { 143 | "id": 5, 144 | "title": "I Need Ya", 145 | "album": "I Need Ya", 146 | "duration": 167, 147 | "image": "needya.jpg" 148 | }, 149 | { 150 | "id": 4, 151 | "title": "Gallan Terian", 152 | "album": "Qismat", 153 | "duration": 171, 154 | "image": "gallan.jpg" 155 | } 156 | ] 157 | }, 158 | "5": { 159 | "recent": [ 160 | { 161 | "id": 1, 162 | "title": "All Black", 163 | "album": "All Black", 164 | "duration": 163, 165 | "image": "all-black.jpg" 166 | }, 167 | { 168 | "id": 2, 169 | "title": "Suicide", 170 | "album": "Suicide", 171 | "duration": 140, 172 | "image": "suicide.jpg" 173 | }, 174 | { 175 | "id": 3, 176 | "title": "Jaani", 177 | "album": "Jaani Tera Naa", 178 | "duration": 155, 179 | "image": "jaani.jpg" 180 | }, 181 | { 182 | "id": 5, 183 | "title": "I Need Ya", 184 | "album": "I Need Ya", 185 | "duration": 167, 186 | "image": "needya.jpg" 187 | }, 188 | { 189 | "id": 4, 190 | "title": "Gallan Terian", 191 | "album": "Qismat", 192 | "duration": 171, 193 | "image": "gallan.jpg" 194 | } 195 | ] 196 | }, 197 | "6": { 198 | "recent": [ 199 | { 200 | "id": 1, 201 | "title": "All Black", 202 | "album": "All Black", 203 | "duration": 163, 204 | "image": "all-black.jpg" 205 | }, 206 | { 207 | "id": 2, 208 | "title": "Suicide", 209 | "album": "Suicide", 210 | "duration": 140, 211 | "image": "suicide.jpg" 212 | }, 213 | { 214 | "id": 3, 215 | "title": "Jaani", 216 | "album": "Jaani Tera Naa", 217 | "duration": 155, 218 | "image": "jaani.jpg" 219 | }, 220 | { 221 | "id": 5, 222 | "title": "I Need Ya", 223 | "album": "I Need Ya", 224 | "duration": 167, 225 | "image": "needya.jpg" 226 | }, 227 | { 228 | "id": 4, 229 | "title": "Gallan Terian", 230 | "album": "Qismat", 231 | "duration": 171, 232 | "image": "gallan.jpg" 233 | } 234 | ] 235 | } 236 | } 237 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import './styles/base.scss' 5 | 6 | Vue.config.productionTip = false 7 | 8 | new Vue({ 9 | router, 10 | render: h => h(App), 11 | }).$mount('#app') 12 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Artists from './components/Artists.vue' 4 | import Tracks from './components/Tracks.vue' 5 | 6 | Vue.use(Router) 7 | 8 | export default new Router({ 9 | mode: 'history', 10 | routes: [ 11 | { 12 | path: '/css-animations-demo/', 13 | name: 'artists', 14 | component: Artists 15 | }, 16 | { 17 | path: '/css-animations-demo/:id', 18 | name: 'tracks', 19 | component: Tracks 20 | } 21 | ] 22 | }) 23 | -------------------------------------------------------------------------------- /src/styles/base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | body { 13 | font-family: 'Sarabun', sans-serif; 14 | line-height: 1.6; 15 | color: #fff; 16 | background-color: #191a28; 17 | padding-bottom: 60px; 18 | -webkit-font-smoothing: antialiased; 19 | -moz-osx-font-smoothing: grayscale; 20 | } 21 | 22 | img { 23 | max-width: 100%; 24 | } 25 | 26 | ul { 27 | list-style: none; 28 | } 29 | 30 | :root { 31 | --easing-smooth: cubic-bezier(0.19, 1, 0.22, 1); 32 | --red: #EA445A; 33 | } 34 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | baseUrl: '/css-animations-demo/' 3 | } 4 | --------------------------------------------------------------------------------