v2: When GSAP Stopped Being the Problem

#gsap #frontend #webdev #learning

When I shipped v1 of my portfolio, GSAP wasn’t missing.
It was postponed.

I shipped v1 with simplified motion because reliability mattered more than ambition. I respected GSAP, but I didn’t understand it yet. In v1, it felt like something powerful that I didn’t have control over.

v2 wasn’t about “adding animations.”
It was about understanding motion well enough to use it intentionally.

In v1, GSAP felt like something I was fighting.
In v2, it finally started working for me.

From animating things to animating systems

In v1, my animations were plain, simple and fixed.
In v2, motion became a system.

Scroll-driven.
Reversible.
State-aware.

That’s when I realized something important:

GSAP isn’t about effects.
It’s about controlling time, state, and intent.

Why GSAP felt hard before

GSAP wasn’t hard.
I just didn’t understand it yet.

So instead of forcing it into the main app, I did something different.

I created an isolated route in my portfolio called orb-lab and just played.

No pressure.
No shipping.
Just experimentation.

And yeah, it got frustrating.

There were moments where I genuinely thought of dropping the idea altogether. You can probably see that reflected in my commit messages (●'◡'●). But mama didn’t raise no quitter so I said "alright alright alright..."
And kept going.

Divide, don’t conquer everything at once

One of the biggest shifts was abandoning the idea of a single massive GSAP timeline.

Instead, I divided responsibility.

GSAP handled global motion

Plain JavaScript and CSS handled geometry-based logic

React stayed out of animation state entirely

For example, the orb’s journey wasn’t one continuous animation.

It moved from hero to projects.
Then disappeared.
Stayed out during the timeline.
Came back at skills.
And finally settled at the bottom.

Each section had a clear responsibility.
Once that worked across screen sizes, only then did I move on.

The timeline follower (where it finally came together)

The timeline was the real test.

Curved SVG.
Responsive layout.
Scroll-linked motion.
A visible guide moving like a roller coaster.

I tried GSAP first, but it interfered with the global animation state. So I stepped back and rewrote it using plain JavaScript and CSS.

Instead of animating, I calculated.

Map scroll position to progress

Smooth it over time

Convert SVG path points to viewport coordinates

Move the follower manually

Once I understood what the code was actually doing, the fixes became obvious.

What GSAP taught me beyond animation

A few things stuck with me:

Animation is UX, not decoration
Motion should explain structure
Not everything needs easing
Not everything needs GSAP

Most importantly:
Don’t fight tools. Build a mental model first. Then write code.

A big shoutout to @webdeveloperhyper on dev.to here.

Their posts and help in comments on GSAP, R3F, and animation fundamentals helped me slow down and actually understand what I was working with instead of layering complexity on top of confusion.