v2: When GSAP Stopped Being the Problem

Source: Dev.to

v1: Fighting GSAP

• Animations were plain, simple, and fixed (scroll‑driven).
• GSAP seemed like something I was battling rather than collaborating with.

v2: A Different Mindset

From “adding animations” to “animating systems”

Instead of forcing GSAP into the main app, I created an isolated route called orb‑lab where I could experiment without pressure. The experience was frustrating at times—some commit messages even hint at moments when I considered abandoning the idea—but I persisted.

Key Architectural Shifts

• The orb’s journey is no longer a single massive timeline. It moves from the hero section to projects, with each segment handling its own responsibility.

Technical Highlights

Curved SVG Example

1. Initial attempt – GSAP interfered with the global animation state.
2. Solution – Rewrote the animation using plain JavaScript and CSS:
   • Map scroll position to progress.
   • Smooth the value over time.
   • Convert SVG path points to viewport coordinates.
   • Move the follower manually.

Understanding the underlying math made the fixes obvious.

What GSAP Taught Me Beyond Animation

• Animation is UX, not decoration.
• Restraint beats complexity; knowing when to stop is a crucial skill.

Acknowledgements

Big thanks to @webdeveloperhyper for his posts and helpful comments on GSAP, R3F, and animation fundamentals. His guidance encouraged me to slow down and truly understand the tools instead of layering complexity on confusion.

Conclusion

• v1 exposed how much I didn’t know.
• v2 demonstrates that understanding comes from restraint, not from adding more features.

It was fun, and I’m already looking forward to the next iteration.

View Repository (link omitted).