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