├── scss ├── .gitkeep ├── svg-animation │ └── _music-note.scss └── main.scss ├── .gitignore ├── .DS_Store ├── img └── gh_logo.png ├── README.md ├── package.json ├── LICENSE.md ├── heart.html ├── music-note.html ├── index.html └── gulpfile.js /scss/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/una/animated-emojis/HEAD/.DS_Store -------------------------------------------------------------------------------- /img/gh_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/una/animated-emojis/HEAD/img/gh_logo.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Animated Emojis 2 | --- 3 | 4 | A fun little collab between [@una](http://twitter.com/una) & [@ryan_brownhill](http://twitter.com/ryan_brownhill), based on [this](https://dribbble.com/shots/1925708-Emojis?list=searches&tag=emojis&offset=0) Dribbble. 5 | 6 | ![](https://d13yacurqjgara.cloudfront.net/users/43762/screenshots/1925708/emojis.gif) 7 | 8 | Started on Codepen -- moved to Github for easier collaboration :) 9 | 10 | Environment based on [this](https://github.com/una/gulp-starter-env) gulp setup. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-starter-env", 3 | "version": "0.1.0", 4 | "dependencies": {}, 5 | "devDependencies": { 6 | "browser-sync": "^2.0.0-rc4", 7 | "gulp": "^3.8.10", 8 | "gulp-autoprefixer": "^2.1.0", 9 | "gulp-cached": "^1.0.2", 10 | "gulp-concat": "^2.4.3", 11 | "gulp-gh-pages": "^0.4.0", 12 | "gulp-imagemin": "^2.1.0", 13 | "gulp-jshint": "^1.9.0", 14 | "gulp-minify-css": "^0.3.12", 15 | "gulp-minify-html": "^0.1.8", 16 | "gulp-rename": "^1.2.0", 17 | "gulp-sass": "^1.3.2", 18 | "gulp-scss-lint": "^0.1.6", 19 | "gulp-size": "^1.2.0", 20 | "gulp-uglify": "^1.0.2", 21 | "imagemin-pngquant": "^4.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Una Kravets and Ryan Brownhill 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /heart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title Here 6 | 7 | 8 | 48 | 49 | 50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /music-note.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Music_note 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /scss/svg-animation/_music-note.scss: -------------------------------------------------------------------------------- 1 | //Delay Sass variables needs to be Animation delay 1 always needs to be .2seconds ahead of animation delay 2 2 | $animation-delay-1: 1.3s; 3 | $animation-delay-2: 1.5s; 4 | 5 | //Master SVG element 6 | .music-note { 7 | animation: music-note 2s; 8 | transform: scale(.5); 9 | } 10 | 11 | //SVG animation elements 12 | #Oval-1 { 13 | animation: Oval-1 .5s cubic-bezier(.5,-.5,.5,1); 14 | transform: scale(1); 15 | transform-origin: 50% 50%; 16 | animation-fill-mode: both; 17 | animation-delay: $animation-delay-2; 18 | } 19 | //Vertical Stems 20 | #Path-1, 21 | #Path-2 { 22 | animation: Path-1 .5s; 23 | animation-fill-mode: both; 24 | transform: scale(1); 25 | transform-origin: -10% 100%; 26 | animation-delay: $animation-delay-2; 27 | } 28 | //Horizontal Stem 29 | #Path-3 { 30 | animation: Path-3 .5s; 31 | animation-fill-mode: both; 32 | animation-delay: $animation-delay-1; 33 | } 34 | 35 | //Keyframes for Animations 36 | @keyframes music-note { 37 | 0% { 38 | transform: scale(0) rotate(50deg); 39 | } 40 | 100% { 41 | transform: scale(1) rotate(0deg); 42 | } 43 | } 44 | 45 | 46 | 47 | @keyframes Oval-1 { 48 | 0% { 49 | transform: scale(1); 50 | } 51 | 100% { 52 | transform: scale(0); 53 | } 54 | } 55 | 56 | @keyframes Path-1 { 57 | 0% { 58 | transform: scale(1); 59 | stroke-width: 5; 60 | } 61 | 100% { 62 | transform: scale(0); 63 | stroke-width: 0; 64 | } 65 | } 66 | 67 | 68 | @keyframes Path-3 { 69 | 0% { 70 | stroke-width: 5; 71 | } 72 | 100% { 73 | stroke-width: 0; 74 | } 75 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title Here 6 | 7 | 8 | 9 | 71 | 72 |

WORK IN PROGRESS

73 |

A fun little collab between una & ryan based on this dribbble ♥

74 | 75 | 76 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | sass = require('gulp-sass'), 3 | rename = require('gulp-rename'), 4 | cssmin = require('gulp-minify-css'), 5 | concat = require('gulp-concat'), 6 | uglify = require('gulp-uglify'), 7 | jshint = require('gulp-jshint'), 8 | scsslint = require('gulp-scss-lint'), 9 | cache = require('gulp-cached'), 10 | prefix = require('gulp-autoprefixer'), 11 | browserSync = require('browser-sync'), 12 | reload = browserSync.reload, 13 | minifyHTML = require('gulp-minify-html'), 14 | size = require('gulp-size'), 15 | imagemin = require('gulp-imagemin'), 16 | deploy = require('gulp-gh-pages'), 17 | pngquant = require('imagemin-pngquant'); 18 | 19 | gulp.task('scss', function() { 20 | return gulp.src('scss/main.scss') 21 | .pipe(sass()) 22 | .pipe(size({ gzip: true, showFiles: true })) 23 | .pipe(prefix()) 24 | .pipe(rename('main.css')) 25 | .pipe(gulp.dest('dist/css')) 26 | .pipe(reload({stream:true})) 27 | .pipe(cssmin()) 28 | .pipe(size({ gzip: true, showFiles: true })) 29 | .pipe(rename({ suffix: '.min' })) 30 | .pipe(gulp.dest('dist/css')); 31 | }); 32 | 33 | gulp.task('browser-sync', function() { 34 | browserSync({ 35 | server: { 36 | baseDir: "dist/" 37 | } 38 | }); 39 | }); 40 | 41 | gulp.task('deploy', function () { 42 | return gulp.src('dist/**/*') 43 | .pipe(deploy()); 44 | }); 45 | 46 | gulp.task('js', function() { 47 | gulp.src('js/*.js') 48 | .pipe(uglify()) 49 | .pipe(size({ gzip: true, showFiles: true })) 50 | .pipe(concat('j.js')) 51 | .pipe(gulp.dest('dist/js')) 52 | .pipe(reload({stream:true})); 53 | }); 54 | 55 | gulp.task('scss-lint', function() { 56 | gulp.src('scss/**/*.scss') 57 | .pipe(cache('scsslint')) 58 | .pipe(scsslint()); 59 | }); 60 | 61 | gulp.task('minify-html', function() { 62 | var opts = { 63 | comments:true, 64 | spare:true 65 | }; 66 | 67 | gulp.src('./*.html') 68 | .pipe(minifyHTML(opts)) 69 | .pipe(gulp.dest('dist/')) 70 | .pipe(reload({stream:true})); 71 | }); 72 | 73 | gulp.task('jshint', function() { 74 | gulp.src('dist/js/j.js') 75 | .pipe(jshint()) 76 | .pipe(jshint.reporter('default')); 77 | }); 78 | 79 | gulp.task('watch', function() { 80 | gulp.watch('scss/**/*.scss', ['scss']); 81 | gulp.watch('js/*.js', ['jshint', 'js']); 82 | gulp.watch('./*.html', ['minify-html']); 83 | gulp.watch('img/*', ['imgmin']); 84 | }); 85 | 86 | gulp.task('imgmin', function () { 87 | return gulp.src('img/*') 88 | .pipe(imagemin({ 89 | progressive: true, 90 | svgoPlugins: [{removeViewBox: false}], 91 | use: [pngquant()] 92 | })) 93 | .pipe(gulp.dest('dist/img')); 94 | }); 95 | 96 | gulp.task('default', ['browser-sync', 'imgmin', 'minify-html', 'scss', 'watch']); -------------------------------------------------------------------------------- /scss/main.scss: -------------------------------------------------------------------------------- 1 | //This is the only scss file because its for Codepen 2 | 3 | //colors 4 | $yellow: #ffeb96; 5 | $white: #fff; 6 | $peach: #f7aa86; 7 | $geraldine: #eb8671; 8 | $copy: #aaa; 9 | $black: #000; 10 | $face--blue: #a4d3dd; 11 | 12 | $eye-size: 6px; 13 | 14 | .emojis { 15 | margin: 0 auto; 16 | width: 350px; 17 | } 18 | 19 | p { 20 | text-align: center; 21 | color: $copy; 22 | font-family: 'Open Sans', 'Source Sans Pro', Verdana, Helvetica, Arial, sans-serif; 23 | font-style: italic; 24 | padding: 2em; 25 | font-weight: 100; 26 | 27 | a { 28 | color: $peach; 29 | } 30 | } 31 | 32 | %face { 33 | z-index: 2; 34 | position: absolute; 35 | } 36 | 37 | li { 38 | border-radius: 50%; 39 | background: $yellow; 40 | width: 40px; 41 | height: 40px; 42 | margin: 5px; 43 | display: inline-block; 44 | 45 | &.blue { 46 | background: linear-gradient(180deg, $face--blue -5%, $yellow 50%); 47 | } 48 | 49 | &.red { 50 | background: linear-gradient(180deg, $geraldine -5%, $yellow 50%); 51 | } 52 | } 53 | 54 | %mouth--smile { 55 | @extend %face; 56 | height: 9px; 57 | width: 18px; 58 | border-radius: 0 0 18px 18px; 59 | border-top: 2px solid $white; 60 | background-color: $peach; 61 | display: block; 62 | } 63 | 64 | %mouth--teeth { 65 | @extend %face; 66 | height: 9px; 67 | width: 18px; 68 | border-radius: 0 0 18px 18px; 69 | background-color: $white; 70 | display: block; 71 | } 72 | 73 | %mouth--pucker { 74 | @extend %face; 75 | height: 5px; 76 | width: 5px; 77 | border-radius: 18px 9px 0 18px; 78 | border-left: 1.5px solid $black; 79 | border-top: 1.5px solid $black; 80 | background-color: $yellow; 81 | display: block; 82 | content: ""; 83 | } 84 | 85 | 86 | %eye--upturned { 87 | @extend %face; 88 | background-color: $yellow; 89 | border: 1px solid $black; 90 | border-bottom: 0; 91 | content: ""; 92 | display: inline-block; 93 | height: $eye-size/2; 94 | width: $eye-size; 95 | border-radius: $eye-size $eye-size 0 0; 96 | } 97 | 98 | %eye--open { 99 | $eye-size: 4px; 100 | @extend %face; 101 | background-color: $black; 102 | content: ""; 103 | display: inline-block; 104 | height: $eye-size; 105 | width: $eye-size; 106 | border-radius: 50%; 107 | } 108 | 109 | .face-1 { 110 | animation: face-1 1.7s infinite; 111 | .eyes { 112 | margin: 14px 8px; 113 | &:before { 114 | @extend %eye--upturned; 115 | } 116 | &:after { 117 | @extend %eye--upturned; 118 | margin-left: 18px; 119 | } 120 | } 121 | .mouth { 122 | @extend %mouth--smile; 123 | margin: 10px 11px; 124 | } 125 | } 126 | 127 | @keyframes face-1 { 128 | 0% { 129 | transform: scale(1.1) rotate(0) translate(0); 130 | animation-timing-function: cubic-bezier(0,1,.5,1); 131 | } 132 | 25% { 133 | transform: scale(.9) rotate(-20deg) translate(-5px,-5px); 134 | animation-timing-function: cubic-bezier(1,0,1,1); 135 | } 136 | 50% { 137 | transform: scale(1.1) rotate(0) translate(0); 138 | animation-timing-function: cubic-bezier(0,1,.5,1); 139 | } 140 | 75% { 141 | transform: scale(.9) rotate(20deg) translate(5px,-5px); 142 | animation-timing-function: cubic-bezier(1,0,1,1); 143 | } 144 | 100% { 145 | transform: scale(1.1) rotate(0) translate(0); 146 | animation-timing-function: cubic-bezier(0,1,.5,1); 147 | }; 148 | } 149 | 150 | .face-2 { 151 | animation: face-2 4s cubic-bezier(0,.5,.5,1) infinite; 152 | .eyes { 153 | margin: 18px 6px; 154 | &:before { 155 | @extend %eye--open; 156 | } 157 | &:after { 158 | @extend %eye--open; 159 | margin-left: 22px; 160 | } 161 | } 162 | .mouth { 163 | animation: face-2--mouth 2s cubic-bezier(0,1,.5,1) infinite; 164 | @extend %mouth--smile; 165 | margin: 8px 11px; 166 | display: block; 167 | } 168 | } 169 | 170 | @keyframes face-2--mouth { 171 | 0% { 172 | border-radius: 0 0 18px 18px; 173 | border-top: 2px solid $white; 174 | width: 18px; 175 | margin: 8px 11px; 176 | } 177 | 50% { 178 | border-radius: 18px; 179 | border-top: 2px solid $white; 180 | width: 9px; 181 | margin: 8px 15px; 182 | } 183 | 100% { 184 | border-radius: 0 0 18px 18px; 185 | border-top: 2px solid $white; 186 | width: 18px; 187 | margin: 8px 11px; 188 | } 189 | } 190 | 191 | @keyframes face-2 { 192 | 0% { 193 | transform: rotate(-20deg); 194 | } 195 | 50% { 196 | transform: rotate(20deg); 197 | } 198 | 100% { 199 | transform: rotate(-20deg); 200 | } 201 | } 202 | 203 | @keyframes eyes-face-3 { 204 | 0% { 205 | height: $eye-size; 206 | transform: translateX(0); 207 | } 208 | 20% { 209 | height: $eye-size; 210 | } 211 | 22% { 212 | height: 0px; 213 | } 214 | 24% { 215 | height: $eye-size; 216 | } 217 | 45% { 218 | height: $eye-size; 219 | } 220 | 47% { 221 | height: 0px; 222 | } 223 | 49% { 224 | height: $eye-size; 225 | 226 | } 227 | 60% { 228 | height: $eye-size; 229 | transform: translateX(0); 230 | } 231 | 62% { 232 | height: 0px; 233 | } 234 | 65% { 235 | height: $eye-size; 236 | transform: translateX(-4px); 237 | } 238 | 82% { 239 | transform: translateX(-4px); 240 | } 241 | 90% { 242 | transform: translateX(0); 243 | } 244 | } 245 | 246 | 247 | 248 | .face-3 { 249 | // animation: face-2 4s ease-in-out infinite; 250 | .eyes { 251 | margin: 18px 6px; 252 | &:before { 253 | @extend %eye--open; 254 | animation: eyes-face-3 4s ease-in-out infinite; 255 | } 256 | &:after { 257 | @extend %eye--open; 258 | animation: eyes-face-3 4s ease-in-out infinite; 259 | margin-left: 22px; 260 | } 261 | } 262 | .mouth { 263 | // animation: face-2--mouth 2s ease-in-out infinite; 264 | @extend %mouth--smile; 265 | margin: 8px 11px; 266 | display: block; 267 | } 268 | } 269 | 270 | 271 | 272 | @keyframes heart-beat { 273 | 0% { 274 | transform: scale(1); 275 | animation-timing-function: cubic-bezier(0.5, -0.5, 1, 1); 276 | } 277 | 20% { 278 | transform: scale(1.5); 279 | } 280 | 100% { 281 | transform: scale(1); 282 | } 283 | } 284 | 285 | 286 | 287 | .face-4 { 288 | 289 | .eyes { 290 | margin: 18px 6px; 291 | 292 | @extend %heart; 293 | animation: heart-beat 1s infinite; 294 | } 295 | .mouth { 296 | @extend %mouth--teeth; 297 | margin: -18px 11px; 298 | display: block; 299 | } 300 | } 301 | 302 | // Heart Shape CSS 303 | %heart { 304 | position: relative; 305 | width: 10px; 306 | height: 9px; 307 | } 308 | %heart:before, 309 | %heart:after { 310 | position: absolute; 311 | content: ""; 312 | left: 5px; 313 | top: 0; 314 | width: 5px; 315 | height: 8px; 316 | background: pink; 317 | border-radius: 5px 5px 0 0; 318 | transform: rotate(-45deg); 319 | transform-origin: 0 100%; 320 | } 321 | %heart:after { 322 | left: 0; 323 | transform: rotate(45deg); 324 | transform-origin :100% 100%; 325 | } 326 | 327 | 328 | @keyframes eye-blink { 329 | 0% { 330 | height: $eye-size; 331 | transform: translateX(0); 332 | } 333 | 20% { 334 | height: $eye-size; 335 | } 336 | 22% { 337 | height: 0px; 338 | } 339 | 24% { 340 | height: $eye-size; 341 | } 342 | 45% { 343 | height: $eye-size; 344 | } 345 | 47% { 346 | height: 0px; 347 | } 348 | 49% { 349 | height: $eye-size; 350 | 351 | } 352 | 60% { 353 | height: $eye-size; 354 | } 355 | 62% { 356 | height: 0px; 357 | } 358 | 65% { 359 | height: $eye-size; 360 | } 361 | } 362 | 363 | 364 | @keyframes kiss-lips { 365 | 0% { 366 | transform: translateX(0); 367 | animation-timing-function: ease-in; 368 | } 369 | 50% { 370 | transform: translateX(-3px); 371 | animation-timing-function: ease-out; 372 | } 373 | 100% { 374 | transform: translateX(0); 375 | animation-timing-function: ease-in; 376 | } 377 | } 378 | 379 | 380 | 381 | .face-5 { 382 | 383 | .eyes { 384 | margin: 18px 6px; 385 | &:before { 386 | @extend %eye--open; 387 | animation: eye-blink 4s ease-in-out infinite; 388 | } 389 | &:after { 390 | @extend %eye--open; 391 | animation: eye-blink 4s ease-in-out infinite; 392 | margin-left: 22px; 393 | } 394 | } 395 | 396 | .mouth { 397 | padding: 7px 18px; 398 | 399 | &:before { 400 | @extend %mouth--pucker; 401 | } 402 | &:after { 403 | @extend %mouth--pucker; 404 | height: 5px; 405 | width: 3px; 406 | margin-top: 5px; 407 | } 408 | animation: kiss-lips 1s infinite; 409 | } 410 | } 411 | 412 | --------------------------------------------------------------------------------