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

CA CONFERENCE 65 : 구글 인터랙티브 디벨로퍼 김종민 강연 영상

Press | April 5, 2016 | Comment

#1/7

#2/7

#3/7

66회 컨퍼런스: 앵콜! 구글 김종민 특강

Press | March 23, 2016 | Comment
DSC01412

DSC01426

ddf