React + GSAP page transition stutters: slow “creep” phase not visible and animation snaps at the end (single tween + CustomEase)

[ricardotr]

I’m building route transitions in a React/Vite portfolio app (React Router + GSAP).
I’m trying to reproduce a very specific motion style (I attached a reference video): one continuous incoming-page transition that feels like:

• slow creep (0–20%)
• fast whip (20–76%)
• very slow settle (76–100%)

Animation requirements:

• incoming page: yPercent: 100 -> 0
• opacity: 0 -> 1
• one GSAP tween only (no keyframes, no chained phase tweens)
• custom ease curve for the 3-phase feel

Current issue:

• If I enforce obvious 3-phase behavior, I get visible stutter/gear-shift feeling at speed changes.
• If I smooth it aggressively, it becomes almost one uniform speed and loses the creep/whip/settle character.
• In some iterations I also get end snapping/jank near completion.

What I already did:

• gsap.set initial state before tween start (yPercent: 100, opacity: 0)
• one tween on a dedicated wrapper (gsap.to(...))
• no layout props animated, only transform + opacity
• force3D: true, will-change: transform, opacity
• removed CSS transitions from animated element (transition: none)
• route swap only on onComplete
• gsap.killTweensOf before creating a new tween
• guard against duplicate/StrictMode double runs (run-id + active tween ref)

Does somebody maybe have a code suggestion or any idea how to tackle this?

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import GSAP as shown in the Install Helper in our Learning Center : 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

Besides echoing the need of a minimal demo, is worth mentioning that keeping both routes views at the same time is a bit trickier and requires some CSS tweaks in order to make it work properly. For that you'll need to use the TransitionGroup component:

https://reactcommunity.org/react-transition-group/transition-group

 

Then use position absolute to keep the previous route on the screen but behind the new incoming route which should have a position relative and a higher z-index value.

 

Hopefully this helps

Happy Tweening!