Animate on scroll

ANIMATE ON SCROLL

Landing page
Travel tips section
Travel tips section continued
Destinations section

This is a website I designed in Illustrator. My idea for the first section was to have most of the image animated. The car would drive in at the same time the clouds moved across the screen from left to right and the sign on a green background would look like it’s being pulled in by the car. As well as, having some of the bushes rotate.

For the second section, I wanted to have my globe image move its arms with the map up and down at the same time, having its thought bubble appear and disappear. For the third section, I wanted to have all the countries with the flag in them to build, adding one piece at a time.

All these animations were done in After Effects and each of these sections would also include animated elements from the “animate on scroll” library. The fourth section would be completely animated with the “animate on scroll” library.

While coding the site, I discovered I couldn’t use the animations I made in After Effects for a single page website. Thus prompting me to change my idea for how I wanted to animate the site.

Click the link provided to view site: https://traveltheworld.ivyleuschen.ink

Play video to view After Effects animations

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