DEV Community

Cover image for Upload Progress Animation Microinteraction with GSAP
Takane Ichinose
Takane Ichinose

Posted on

Upload Progress Animation Microinteraction with GSAP


This is just my sample animation of file uploading progress animation, created with Vanilla (plain and simple) Javascript, and TweenLite (GSAP).

On the first click, the shape of the button will become circle. Then, the button will become a progress bar, and a "speech bubble" above the progress bar will be shown. That "speech bubble" shows the percentage of the upload progress. The "speech bubble" will tilt when the progress starts.

After the uploading is done, the button will turn into green colored circle, then the check mark will appear, pertaining that the upload is already done.

After 5 seconds, the button will return into its normal state.

I used GSAP's Timeline to do all of the steps of animation. Actually, creating the steps of animation became easier when it's used.

I didn't use any preprocessors in this pen, to show the simplicity of using GSAP in animation. No CSS loop hack, or whatsoever.

Discussion (2)

iainfreestone profile image
Iain Freestone • Edited on

Looks great, have just starting looking into Greensock myself and looks very powerful.

takaneichinose profile image
Takane Ichinose Author

Thank you. it's Greensock btw. Yes, its animation feature is really powerful, and easy to code.