![bb_title](http://blog.cmiscm.com/wp-content/uploads/2016/05/bb_title.png)
VIDEO
LOGO DESIGN
![logo2](http://blog.cmiscm.com/wp-content/uploads/2016/05/logo2.png)
TYPO ANIMATION – JAVASCRIPT TO DRAW ON CANVAS
![nytypo](http://blog.cmiscm.com/wp-content/uploads/2016/05/nytypo.gif)
LINE ANIMATION – JAVASCRIPT TO DRAW ON CANVAS
![line3](http://blog.cmiscm.com/wp-content/uploads/2016/05/line3.gif)
MASKING TRANSITION – JAVASCRIPT TO DRAW ON CANVAS
![mask](http://blog.cmiscm.com/wp-content/uploads/2016/05/mask.gif)
SKEW BOUNCING TRANSITION – JAVASCRIPT WITH CSS3 TRANSFORM
![skew](http://blog.cmiscm.com/wp-content/uploads/2016/05/skew.gif)
LOADING
![start2](http://blog.cmiscm.com/wp-content/uploads/2016/05/start2.gif)
LIST
![ac1](http://blog.cmiscm.com/wp-content/uploads/2016/05/ac1.jpg)
LIST PAGING TRANSITION
![paging](http://blog.cmiscm.com/wp-content/uploads/2016/05/paging.gif)
LIST TO VIEW TRANSITION
![select](http://blog.cmiscm.com/wp-content/uploads/2016/05/select.gif)
VIEW PAGING TRANSITION
![vpaging](http://blog.cmiscm.com/wp-content/uploads/2016/05/vpaging.gif)
VIDEO PLAYER
![ab3](http://blog.cmiscm.com/wp-content/uploads/2016/05/ab3.jpg)
GIF PLAYER
![ab5](http://blog.cmiscm.com/wp-content/uploads/2016/05/ab5.jpg)
MORE FUNCTION
![ab4](http://blog.cmiscm.com/wp-content/uploads/2016/05/ab4.jpg)
![more](http://blog.cmiscm.com/wp-content/uploads/2016/05/more.gif)
ABOUT
![ab6](http://blog.cmiscm.com/wp-content/uploads/2016/05/ab6.jpg)
ABOUT TRANSITION
![about](http://blog.cmiscm.com/wp-content/uploads/2016/05/about.gif)
SUBMIT
![ab7](http://blog.cmiscm.com/wp-content/uploads/2016/05/ab7.jpg)
![submit3](http://blog.cmiscm.com/wp-content/uploads/2016/05/submit3.gif)
ABOUT TO SUBMIT TRANSITION
![stoa](http://blog.cmiscm.com/wp-content/uploads/2016/05/stoa.gif)
SEARCH FUNCTION
![search](http://blog.cmiscm.com/wp-content/uploads/2016/05/search.gif)
HELP
![ab9](http://blog.cmiscm.com/wp-content/uploads/2016/05/ab9.jpg)
RESPONSIVE
![response4](http://blog.cmiscm.com/wp-content/uploads/2016/05/response4.gif)
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