Bao GSAP Animation
Purpose
The goal of this project was to demonstrate my knowledge on the Javascript animation plugin: GreenSock Animation Platform or GSAP. I converted an Illustrator illustration with multiple layers into an SVG, took the code from the SVG file, added it to the HTML, and used GSAP to animate it. GSAP features used were Tween and Timeline.
Project Result: Live Preview Here
Details
- Role — Web Developer
- Software — VS Code, Adobe Illustrator
- Tools — GSAP, Javascript, HTML, CSS
- Total Time — 5 hours
Brainstorming & SVG Preparation
I found a cute dumpling vector on Adobe Stock that included 3 dumplings and a pair of chopsticks. Since the vector file cuts off the chopsticks, I made the artboard bigger to include the chopsticks fully in Adobe Illustrator. I also separated each dumpling and chopstick into its own layer and named the layers accordingly, this will be useful later as the layer names will become the ID of each element in the SVG. Cleaned up the SVG code using SVGOMG to keep the file size small, some features used included: remove doctype, remove XML instructions, merge styles, and remove empty containers
GSAP: Tween
Since the CSS and Javascript will be using ids and classes from the HTML, the HTML was written with them in mind. Added a reset CSS to standardize the look across different browsers. Used gsap.set() to move the dumplings and chopsticks to the starting positions using the id and classes on the SVG containers. Created a variable for each animated element, used gsap.to() to keyframe each movement and calculated the delay for each element.
Added onclick events that connected to the buttons on the HTML to allow pause, play, reverse, and restart controls for the animation. Unfortunately, Tween only allows control of one variable at a time so only the chopsticks were controllable via buttons.
GSAP: Timeline
Timeline is a much powerful tool, as it allows easier controlling of timing and delays; future changes for small tweaks would not involve changing the delay of the whole sequence one by one like in Tween. Using the base code from the Tween version, the gsap in gsap.to() was replaced with a variable that contained gsap.timeline(). Other than that, everything was kept relatively the same. Since the whole animation can be called with one variable, I was able to attach it to the buttons to be able to control all the elements in the animation.
Revising
I moved the control buttons from above the animation to below the animation, since the layout looked top-heavy before; this would make the layout more balanced. Used @import in the CSS to replace linking it in the HTML as this would make changing the font a lot easier if this was a multi-page website; I would only need to change something in one file instead of every HTML page. Added responsiveness using the mobile-first approach, making the viewport mobile-sized, and changing all CSS units from px to rem (where 1 rem = 10px by adding font-size: 62.5%; in the body). Breakpoints used were 375px, 425px, 768px, 1024px, and 1440px. At each increasing viewport size breakpoint, the button sizes, the animation size, and the font sizes all increase incrementally.
Thanks for reading through the end! I really appreciate your interest in my projects. :)
Check out my other projects!