A Scroll-Driven Animated Timeline for My Developer Portfolio
When I first started brainstorming ways to present my work history on my portfolio site, I kept coming back to one idea:
I wanted it to feel alive.
Resumes and timelines are great, but they’re static. They tell you where you’ve worked, but not the story of your journey. And as someone who loves frontend animation, creative coding, and building delightful experiences for users, I couldn’t resist the challenge of turning something normally boring into something fun, interactive, and memorable.
That’s what led me to create what I now call my “Walking Through My Career” animation. It’s a fully animated, scroll-driven world where my custom cartoon avatar literally walks backward through each chapter of my software engineering career, building by building, job by job.
And yes, I really built a globe.
And buildings.
And a walking character.
All from scratch.
🌎 The Idea That Sparked Everything
A while ago, I came across a creative scrolling experience built by Othneil Drew (space-journey.othneil.dev), and it immediately sparked something in my brain. His work gave me just enough inspiration to explore the idea of using scroll-based animation to guide someone through a story.
From there, the direction became clear:
What if scrolling through my portfolio felt like literally stepping back through time, one employer at a time?
🏢 Designing a World Around My Career
The first big piece of the project was visual. If I wanted someone to “walk through my career,” I needed…
well, a world to walk on.
A custom-designed SVG globe
I opened Adobe Illustrator and created a large, stylized, cartoon-style globe that would act as the circular path for the animation. Only the top third is visible at any given time, but the entire globe exists so it can rotate cleanly in either direction as the user scrolls.
Buildings for each company
Every place I’ve worked became a custom SVG building placed around the outer edge of the globe. Each building includes:
- A company sign
- A date range
- My job title
- Core technologies I used
- And two doors; one on each side
The buildings are spaced equally around the circumference so that each rotates naturally into view as you scroll.
My cartoon avatar
My “ElliottProgrammer” character, the same character used across my brand, appears on the edge of the globe performing a walking motion as the world rotates beneath him.
This was one of the most fun parts of the project.
đź•ş Bringing the Avatar to Life (Via Sprite Animation)
I created the walk cycle using Adobe Photoshop and Adobe Character Animator, rigging the avatar with a skeleton and joints so I could animate realistic steps.
A single walk cycle became 14 individual frames, which I laid out into a sprite sheet.
Then, using JavaScript, I cycled through those frames in sequence as the scroll progressed.
The result?
A smooth, believable walking animation, but controlled entirely by scroll position instead of time.
This made the avatar walk backward when scrolling down and forward when scrolling up. It feels surprisingly natural, and it was incredibly satisfying to see it working in-browser.
🎬 Making the Magic Happen: Scroll-Driven Animation with GSAP
For all the movement and sequencing, I used GSAP along with the ScrollTrigger plugin, my go-to pairing for complex scroll-based interactions.
Here’s the high-level rundown of how the animation works:
1. The “Work Experience” section pins to the screen
Once you reach the section, the normal scroll stops and the section becomes fixed in place.
2. The globe begins to rotate
Instead of the page scrolling, the world itself rotates, revealing each building one after another.
3. The avatar “walks” as the world moves
The sprite sheet cycles based on scroll progress, so the character appears to walk backward into the past.
4. Layer trick: giving the illusion of walking into the buildings
This was one of the most interesting technical challenges.
To make it look like the character enters a door, disappears inside, then exits the other side, I used three layers:
- Back layer – Full buildings
- Middle layer – The avatar
- Front layer – Partial buildings missing the inner halves of the doorway
That front layer sits on top of the avatar, so the portions covering the doorway hide the character at the right moment, creating the illusion of depth, almost like a cutout or mask.
5. Reversing the scroll reverses the story
Scrolling back up rotates the world in the opposite direction, making the character walk forward through the same timeline in reverse order.
When the animation completes (in either direction), the section unpins and normal scrolling resumes.
đź‘€ Why I Built This (and Why I Loved Every Second of It)
This project scratches the exact creative itch that made me fall in love with frontend engineering in the first place.
It combines:
- Unique visual design
- Custom illustration work
- Animation sequencing
- Scroll-based storytelling
- Lightweight technical complexity
- A little math, a little GSAP, and a lot of imagination
It’s playful, but it’s also purposeful. Anyone looking at my work experience now gets something much richer than a bullet list:
They experience the journey.
They walk through my timeline the same way I did! One step, one building, one role at a time.
🎉 Final Thoughts
Building this “Walking Through My Career” animation was one of the most fun projects I’ve added to my portfolio. It challenged my illustration skills, pushed my animation know-how, and gave me a way to turn something ordinary into something memorable.
I love projects like this. Where creativity and engineering collide, and I’m excited to keep exploring new ways to bring storytelling into the web.
If you’d like to see the animation in action, check out the video above, or visit my portfolio and scroll through the experience yourself.
Thanks for walking along with me. đź‘Ł