Illustration from pikisuperstar on Freepik
San Francisco is a beautiful city with it's own quirks. I'm proud to call this city my home. This animation, created in CSS, highlights one of the city's most popular landmark, the Golden Gate Bridge.
San Francisco's Ocean Avenue
CSS animation is responsible for moving elements such as a rotating loading wheel. Giving certain elements movements can be essential for the function of the website and overall increase the energy of the site. This project covers a few types of movements and the details required for an animation.
The first step was to find a vector. This vector was sourced from Freepik and posted by pikisuperstar. Next the layers were properly labeled and grouped so that the SVG code had the proper ids.
Now that the file is ready to animate, I decided the clouds will move since SF is known for it's foggy and cloudy climate. Then the sky color is changed to reflect the sky changing to night and back to day. The animation depicts a glimpse into the Golden Gate Bridge's day.
This project gave me appreciation for the animated details on websites. I often don't realize the animations used on a website because it has become so integrated into a website structure. In my future learnings, I want to incorporate element interactions that require the user to hover the mouse over to activate the animation. This can create an interesting element for the user to play with and add a unique movement to my portfolio site.