[HN Gopher] Ask HN: Do you know travel blogs that have animated ...
___________________________________________________________________
Ask HN: Do you know travel blogs that have animated SVG maps of
their travels?
I'm searching for a travel blog that wrote a tutorial on how they
created custom SVG animations for the routes he took along his
trips. I've been banging my head against Google for a solid 3-4
hours at this point but it is pointless to try to search something
there these days so I come here. I remember that the blogger in
question was into photography and photographed the Te Whanganui-A-
Hei (Cathedral Cove) in New Zealand during early morning with no
people there and wrote a post about the process. And of course they
had these small SVG animations of their trips at the top of their
posts, with a map displaying the route they took, animating the
path. They wrote a pretty in-depth article about how they
accomplished this with the help of some custom JS and SVG
animations too and I am after that article. If you know the name
of the blog that would absolutely make my day! Please also feel
free to answer if you know anything _similar_ to the title of the
blog where somebody has created stylized animated SVG maps of their
trips and documented the process they used to create those.
Author : trebeljahr
Score : 70 points
Date : 2025-02-04 01:40 UTC (1 days ago)
| sflanker wrote:
| https://tympanus.net/codrops/2015/12/16/animated-map-path-fo...
| Not an exact match for your description, but in the same vein
| lbebber wrote:
| Oh, I made this! (almost a decade ago, huh)
| sflanker wrote:
| Tangentially interesting: while leveraging Perplexity to try and
| find the blog post in question this post and your StackOverflow
| question already pollute the results it draws from and causes it
| to abort any more detailed search for such a blog post. I find
| this mildly amusing.
| throwaway519 wrote:
| haha, I just asked ChatGPT and it references this HN post.
|
| It's a small world.
| rvrs wrote:
| Is it this one? https://photos.paulstamatiou.com/new-
| zealand/coromandel-peni...
|
| EDIT: Any HN mods/devs reading this -- there seems to be a
| display bug for comment creation time? On edit it says 20hrs
| (accurate), whereas viewing the comments otherwise shows that it
| was posted an hour ago. Not sure what's going on
| yapyap wrote:
| I also see it as posted an hour ago, and see the original
| thread post as 2 hours ago.
|
| Odd.
| mtmail wrote:
| There's something called a second-chance queue for overlooked
| submissions https://news.ycombinator.com/pool (listed on
| https://news.ycombinator.com/lists)
|
| Some older users (I think YC alumni) can nominate articles and
| moderators give them a boost. The timestamp doesn't change,
| I've seen 2 day old articles appearing. It's a bit confusing, I
| think it was hacked in years ago but works good enough.
| jfkrrorj wrote:
| Heh, i just asked deepseek for fun. It gave me python script that
| takes photos, uses exif coordinates and OSM. 15 minutes
| anonzzzies wrote:
| How about at least put it in a gist?
| peterldowns wrote:
| Craig Mod's "Koya Bound" website has beautiful photos and custom
| SVG maps.
|
| https://walkkumano.com/koyabound/
|
| I thought this was so compelling that I ended up walking the
| trail myself. Incredible experience.
| benabbott wrote:
| This is really well done.
| exabrial wrote:
| This is the first time for me where a website hijacked the
| scroll wheel, and it's actually _really really_ well done. This
| is amazing. Thanks for posting it.
| daemonologist wrote:
| The key is that it doesn't actually hijack the scroll wheel -
| the main content (header and text and photos on the left) all
| scrolls normally, controlled by the browser. The map just
| monitors the scroll position and element client rects and
| runs its own non-blocking visualization on the side.
|
| I agree - beautifully implemented, and great content too.
| lbebber wrote:
| Oh, this was based off of a project I made for Codrops[1]. Let
| me know if you'd like some help or input!
|
| [1]https://tympanus.net/Development/StorytellingMap/
| CharlesW wrote:
| That and your other projects at lbebber.github.io/public are
| stellar, Lucas!
| lbebber wrote:
| Thank you, glad you like it!
| whycome wrote:
| Is there something like this that uses KMZ waypoints to craft
| the map/animation?
| peterldowns wrote:
| I didn't realize you were the original programmer on this --
| amazing work!
| neuraldenis wrote:
| Amazing project, love it!
| nicwolff wrote:
| That's just terrific!
| kyleblarson wrote:
| Doing a temple stay at Koyasan is by far my favorite lifetime
| travel experience.
| skadamat wrote:
| I came here to link to this! I also spent a week trying to find
| this a few years back :)
| illwrks wrote:
| So.. I don't know what you're talking about but I work in a
| corporate environment where we can't use JS but we can use SVG
| images... As a consequence I end up creating graphics in
| illustrator, exporting to SVG and then hand animating them with
| CSS animations.
|
| I wouldn't recommend doing it my way, but for path animations
| they are likely animating the stroke length. Here is an example
| that might help, but use an animation tool if you can.
|
| https://css-tricks.com/svg-line-animation-works/
|
| One thing of note with stroke animations.. if you transition
| to/from negative numbers the animation breaks in Safari (negative
| numbers are out of spec aparently). There is a work around but I
| can't remember it at the moment, it results in the stroke
| animation playing in reverse though.
|
| As mentioned above, if you can use a JS library, use one.
| chris_overseas wrote:
| Not quite what you're asking for, but there was this discussion
| and website that you'll hopefully find relevant:
|
| https://news.ycombinator.com/item?id=42660255
| hipinspire wrote:
| https://momoadvisors.com/sourcing.php by https://hipfolio.co
| knowknowledge wrote:
| Here's one from a few months ago "HOW I ADDED MAPS TO MY TRAVEL
| POSTS"
|
| https://news.ycombinator.com/item?id=41532958
| gryzzly wrote:
| I built a travel blog a bit like that, also inspired by Craig Mod
| and so by Luke's work by proxy. It uses a real leaflet map though
| and maybe is not as elegant -
| https://freetimemanagers.com/05-04-2019/
|
| You can check the code here - https://github.com/gryzzly/photos-
| map/blob/master/components... - I cache photos scroll position
| and then draw a triangle from photo corners to the photo's
| coordinate on the map.
| 1wheel wrote:
| https://www.lkk-store.com/lkk-map/
| matallo wrote:
| I built something similar for my blog
| https://matall.in/posts/vietnam/
|
| I didn't write a tutorial but you can check the code here
| https://github.com/matallo/matall.in
___________________________________________________________________
(page generated 2025-02-05 23:01 UTC)