Booounce

Projects | May 26, 2016 | 1 Comment
bb_title

VIDEO

LOGO DESIGN

logo2

TYPO ANIMATION – JAVASCRIPT TO DRAW ON CANVAS

nytypo

LINE ANIMATION – JAVASCRIPT TO DRAW ON CANVAS

line3

MASKING TRANSITION – JAVASCRIPT TO DRAW ON CANVAS

mask

SKEW BOUNCING TRANSITION – JAVASCRIPT WITH CSS3 TRANSFORM

skew

LOADING

start2

LIST

ac1

LIST PAGING TRANSITION

paging

LIST TO VIEW TRANSITION

select

VIEW PAGING TRANSITION

vpaging

VIDEO PLAYER

ab3

GIF PLAYER

ab5

MORE FUNCTION

ab4
more

ABOUT

ab6

ABOUT TRANSITION

about

SUBMIT

ab7
submit3

ABOUT TO SUBMIT TRANSITION

stoa

SEARCH FUNCTION

search

HELP

ab9

RESPONSIVE

response4

DESCRIPTION

Booounce is a collection of inspiring short videos and GIFs, and the website also has nice animations and transitions.
I and my wife designed this ‘Circle line animation’ and ‘Bouncing ball’ concept 3 years ago for our new project, but the project was cancelled. I really loved the concept, so I’ve re-designed and made this project to share inspired videos for the motion lover. Because I enjoy watching short animations and motions, and I think it’s helpful to improve a motion skill.
This website was created with HTML5, CSS3 and JavaScript, and designed for all size of devices.
I’ve created my own animation libraries for this project, such as Typo animation, Skew bouncing transition, Line animation, Bouncing ball transition and Masking transitions. And tried to improve the performance on the mobile devices.
The project name was inspired by Cho Yong Pil’s song, Bounce.

AWARDS

  • The FWA, Site of the Day – May 2016

ROLE

  • Solo work

Printing the book

Projects | July 23, 2015 | 1 Comment
k1

k2

k3

k4

k5

k6

k7

k8

k9

k10

k11

RELATED POSTS

  • +Interactive Developer : Google Engineer’s Portfolio
  • +Book Cover Design

<Interactive Developer> Book Cover Design

Projects | July 17, 2015 | 2 Comments

BOOK

DSC05496
DSC05502
DSC05515-2

DESIGN

k1
b2
k5
b4

GRID

b5

DESCRIPTION

The cover design for my new book <Interactive Developer : Google Engineer’s Portfolio>.

RELATED POSTS

  • +Interactive Developer : Google Engineer’s Portfolio
  • +Printing the book

ROLE

  • Solo work