Travel the world

Hero banner, top of website
Travel Tips section of website
Destinations section of website

This is a website I designed in Illustrator. For the first section, my idea was to have most of the image animated. The car would drive in while the clouds moved across the screen from left to right, and the sign on a green background would appear to be pulled in by the car. Additionally, I wanted some of the bushes to rotate.

In the second section, I envisioned the globe image moving its arms along with the map, both shifting up and down simultaneously. I also wanted the thought bubble to appear as the arms started moving up and disappear when they moved down. For the third section, I planned for the countries with flags to “build” by adding one piece at a time.

All these animations were created in After Effects, and each section would include animated elements using the “animate on scroll” library. The fourth section would be entirely animated with the “animate on scroll” library.

All these animations were created in After Effects as part one of the project. However, since I chose to code a single-page “animate-on-scroll” website for part two instead of a full-page website, the After Effects animations were left out, as per the instructions provided. Click the link provided to view site: https://traveltheworld.ivyleuschen.ink

Artwork

  • Flags designed by Aranjuezmedina on Freepik
  • Car and background, plane and dotted path designed by pch.vector on Freepik
  • Sign designed by Freepik
  • Globe with map designed by catalyststuff on Freepik