I'm implementing a portfolio-style Pages feature on my link-in-bio website using Next.js, React, Tailwind CSS, and GSAP.

Each page contains its own content, and I want the pages to animate independently according to their configured travel distances and directions.

Expected behavior

- Left to right (LTR): The page content should transition from the left edge toward the right, respecting its configured travel distance.

- Right to left (RTL): The page content should transition from the right edge toward the left, respecting its configured travel distance.

- Each page should animate independently, without its position being unintentionally affected by the other page's animation or layout.

- The configured travel distance should determine how far the content moves. The animation should not automatically force the content toward the center or override the configured distance.

- Both directions should behave consistently, with the appropriate direction and travel distance applied to each page.

Actual behavior

LTR: The transition does not respect the configured travel distance. The content moves in a way that does not match the intended distance from the left edge.

RTL: The behavior is worse. Instead of respecting the configured travel distance from the right edge, the content appears to be forced toward the center.

As a result, neither direction consistently follows the intended animation configuration.

Environment

- Framework: Next.js

- UI library: React

- Styling: Tailwind CSS

- Animation library: GSAP

- Relevant file: "profile-view.tsx"

What I've tried

I've been investigating the page transition logic and how the configured travel distance is applied to the animations. However, I haven't identified the root cause of the inconsistent positioning between LTR and RTL.

I want to preserve the existing page layout, styling, animations, and scrolling behavior rather than replacing the entire implementation with a different animation system.

What I need help with

How should I structure the GSAP animations so that each page respects its own configured travel distance and direction?

Specifically:

1. Why might an LTR animation fail to respect its configured travel distance?

2. What could cause an RTL animation to shift toward the center instead of maintaining its intended position relative to the right edge?

3. How can I ensure that each page's animation is calculated independently without conflicting transforms, layout positioning, or shared animation state?

4. How should I handle element positioning and GSAP transforms to ensure that the configured travel distance is applied consistently in both directions?

I'm looking for a fix that addresses the underlying positioning or animation logic while preserving the existing implementation.

The relevant "profile-view.tsx" animation code can be provided for debugging.

The script to fix:

https://mega.nz/file/OnIVwLbA#lBY_tIYWiT0z98R6ok45bFleN9lEGL4aOLc7B3tS-do