albertanthonyarrieta/commute

gsap animation

Assignment 4: Commute

This project is to project the different people you may encounter on your daily commute to wherever you are heading to. Here you encounter different characters that use the same train to get somewhere and you can learn more about them by clicking on them. Each character has their own schedule, they will hop on the train and hop off at certain times when you scroll along the draggable timeline. The main purpose of the project is to carefully get to know the lives of people who all take the same train on the same day and see how everyone's lives differ but still led all of them to the same train to carry on with their day. I chose this idea for the project because I used to commute to my old college before I transferred to U of L. There were a lot of poeple I would share the same buses and trains with but I never really got to know them. It always made me wonder where they are headed to or what their lives feel like and how our lives led each one of us to the same bus or train. Some are familiar faces while others are new. To me it is interesting how I can see the same people almost everyday at the same time but never have a single clue what they are up to every time. My implementation of this idea uses GSAP as the animation library and just regular javascript, html, and css. Most of the heavy work is on the SVG that I made through figma. Figma is probably the next best to create at SVGs but it was the easiest thing I could access to create quick SVGs using an additional plugin that turns figma elements into an SVG. I could have used Illustrator but I didn't want to waste time redownlaoding it and setting my environment up. For the GSAP animations, I targetted specific groups of elements in my SVG and made "idle" animations for each character and a little bit of swaying for the train handles to give a feeling of motion. I found it easy to use GSAP but my main struggle was to target the right elements in the SVG.