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 visually inspiring short videos and GIFs, featuring engaging animations and transitions throughout the website. The concept of a “Circle Line Animation” and “Bouncing Ball” was initially developed by myself and my wife for a new project, but the project was ultimately cancelled. I was particularly enamored with the concept and decided to reimagine it as a platform to share inspiring videos for motion design enthusiasts.

The website was built using HTML5, CSS3, and JavaScript, and is designed to be fully responsive on all device sizes. To enhance the user experience, I developed my own animation libraries for the project, such as Typo animation, Skew bouncing transition, Line animation, Bouncing ball transition and Masking transitions. Additionally, I made efforts to optimize performance on mobile devices. The project name “Booounce” was inspired by the song “Bounce” by Cho Yong Pil.

Technologies & Tools

  • JavaScript
  • CSS3
  • HTML5
  • Canvas
  • UX/UI Design
  • Animation
  • Interaction

AWARDS

  • The FWA, Site of the Day – May 2016

ROLE

  • Solo work