css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

This is a visual itinerary of my trip to New Zealand. The animations is created with GSAP and it was really fun to work with. This visual itinerary is actually incomplete and there are several UX issues that I was hoping to address earlier. For example, loading indicator, scroll indicator for the itinerary and keyboard controls UI indicator. But I have a show and tell talk today and this is why I have to deploy early.

Anyway, the main idea is there and all the animations seems to be working! Ha! I had a lot of fun working on this and exploring GSAP. I hope you enjoy it.

Comments

  1. Oh my goodness, this is super cool and so pretty! And your trip sounds amazing. And I love the little hobbit houses! :)

  2. Great illustrations and very nicely done! :)

  3. So cool!!!

  4. @KristopherVanSant Thank you! I'm glad you like it! The hobbit house is my favorite thing to draw too! @mosaic38 Thank you! <3 @Nagisa1130 :)

  5. Really cool! Congrats!

  6. wow! how did you do this without any js?

  7. @trose I did use JS. I just minify it and include it as an asset. That is why the JS part is empty.

  8. woah this is super cool! I'm actually working on a travel blog right now and I find adding a map with locations, traveled route and different types of markers and all whilst looking pretty, is pretty close to impossible with standard maps solutions. This looks gorgeous, although I bet there's a lot of work in it!

  9. Very cool indeed. I think you have inspired me to do something similar with my own country... now I also want to visit New Zealand. I want to learn about pure CSS animations, I feel, in most cases, they provide a more elegant solution... anyway, thanks for your hard work :)

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...