
VIDEO
LOGO DESIGN

TYPO ANIMATION – JAVASCRIPT TO DRAW ON CANVAS

LINE ANIMATION – JAVASCRIPT TO DRAW ON CANVAS

MASKING TRANSITION – JAVASCRIPT TO DRAW ON CANVAS

SKEW BOUNCING TRANSITION – JAVASCRIPT WITH CSS3 TRANSFORM

LOADING

LIST

LIST PAGING TRANSITION

LIST TO VIEW TRANSITION

VIEW PAGING TRANSITION

VIDEO PLAYER

GIF PLAYER

MORE FUNCTION


ABOUT

ABOUT TRANSITION

SUBMIT


ABOUT TO SUBMIT TRANSITION

SEARCH FUNCTION

HELP

RESPONSIVE

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