I Built an Animation for a Designer (...And Did Pair-Coding with ChatGPT)

June 13, 2023

As an engineer who hangs out with designers I find a lot of relevance with this girl here: Classical Musicians Guess What Instruments Strangers Play: "Which pianist hangs with violinists?" -- their accompanists 😅

My concert friend, Lily, is a designer. She's recently building her profile site that I passionately offered my help to build. Moment she showed me the animation, she said herself and her software engineer (backend) boyfriend do not know how to implement it. I looked at the ask and it took me only a split second to realize that I've been doing the "engineering" things on app building too much and almost forgot how much fine work there is at the back of creative work in browsers. Not a trivial ask so I gladly took on the challenge.

It's also an interesting exploration pair coding with ChatGPT. And I found out there's not much of the nitty-gritty tech details I'll have to share. Because ChatGPT did most of the hard work and I FOMO on the hard thinking. The experience pair coding with ChatGPT, however, gives me a refreshed perspective. Will I lose my job? 🤣 I don't know. But I definitely enjoy my job more.

Getting the naïve implementation

The ask is that she has cover image with a girl launching a paper plane. The paper plane will follow a track as the visitor scrolls down the page, and eventually stop at the end of that section (see cover image).

I always start from a naïve implementation, something so basic that it definitely will work but highly likely not a good idea. I thought of random things like maintaining a map of coordinates and then moving the plane with an onscroll callback. It'll definitely work. It'll also just turn the main work to punching numbers, which isn't very cool. Realistically speaking, I do imagine a more progmatic solution to involve some SVG magic. But I don't know the details.

So where ChatGPT comes in first is an implementation using the SVGGeometricElement API. And essentially it's these two APIs that come in handy in the task:

• path.getPointAtLength(distance)
• path.getTotalLength()

With totalLenghth = path.getTotalLength(), we can calculate a proportion of the total length as the distance to be applied at path.getPointAtLength(distance) and retrieve the coordinates for the point to draw on the DOM. Here is an awesome demo of moving objects along a path. In my context, all I need then is to get the proportion from the page's scroll position.

By the way, initially ChatGPT gave me an implementation with a trivial path going vertically down (the DOM grows vertically down by default), and said that for more complex animation like following a curved path I can use this or this libraries. I said you already got the track in an SVG path element, just copy the path from the designer's Figma bro (no I didn't say that). It was amusing how ChatGPT is acting like a real dev but not quite sharing a same thought for what is trivial.

Then, I've prompted ChatGPT to do most of the implementations while I did mostly code review and suggested the next iteration to progressively build up to the "final" raw implementation. Such iterations include: 1) to make the plane follow a curved path, 2) to make the plane turn backwards when scrolling up, 3) to make it turn according to the tangent of the curve, 4) throttle the onscroll event. And then I had a working demo that I can start fitting into my friend's profile site. Do check it out here.

Here's how the animation looks:

Adopting the code to the actual site

When adopting the demo to the actual site, it's when some more detailed contexts had to be fitted.

The more trivial parts are around the element being a specific part of the page rather than the whole page. Next thing was that I don't want the plane to appear unless the part becomes relevant and the user starts scrolling, as the background image already has a plane in the girl's hand. So I implemented a threshold for which the plane will show.

Relevant to this topic is that there should be a frame change for the background image after the plane is released, where the girl now has an empty hand.

While I've asked ChatGPT to give me the throttle, it took me a bit of number tweaking to get the best balance of a smooth animation and not-so-frequent onscroll handler calls. To ease out the janky-ness of the throttle, I've added some CSS animation using a same animation duration as the throttle timeout.

I've also checked with the designer about responsive design. We've settled on a lower limit on the screen width to trigger the animation. I've re-used her media query breakpoint on this. I've then abstracted out the handler to attach and detach to the browser's onscroll event when the screen resizes.

You can check out the final animation on Mapotofu Design.

Other chats with ChatGPT

There are a lot of further enhancements that can be done with this implementation. In fact, I've asked ChatGPT to give me a version of the animation with decayed speed based on gravitational force, which it did. I've then had some fun reviewing some of my high school physics to validate the decay computation.

I've also asked ChatGPT to do some evaluation on the performance overhead. It said that the computations are "pretty fast" on modern JavaScript engines. When I pushed for more detailed analysis, it gave me code to profile the handler callback. It's performing as a pretty satisfying developer to me :)

Overall, I feel pair coding with ChatGPT gives me some pretty closed up experience of "focusing on building the business context". And a powerful one because it does not tie up to any specific business contexts at all. It recalls me my time in college when I always paired up with a computing major for my interdisciplinary courses across math and computer science. I felt happy with "proof of concept" whereas my CS partner loved to do the implementations. I feel liberated from the nitty-gritty implementation now that I'm pairing up with ChatGPT. Five stars will def buy again.