Jump to content
Search Community

ScrollTrigger pin breaking on using react-transition-group page transition in Next js

CuteAppi test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

On clicking the link scrollTrigger in the below  error demo and scrolling the section is not being pinned but on manually refreshing the page the it is getting pinned and works fine, on removing any transition animations the pin works as well still works.


Here's a link to the same error that I replicated.



P.S I am a gsap noob and im still learning

Link to comment
Share on other sites

  • Solution

Hi @CuteAppi and welcome to the GreenSock forums!


The reason for this is because of two things:

  1. When the ScrollTrigger instance is created in the scroll page, the transition is not yet completed, so ScrollTrigger does it's calculations when the element is still at the left of the sreen.
  2. You are using pinning in ScrollTrigger. The transition animation uses transform (Scale and X) and pinning uses position fixed. When an ancestor of a fixed element has a transform applied to it it breaks the way it behaves:

The solution is to wait for the transition to be completed (as seen in the layers page) and clear the styles of the container that is animated in the page transition.


Here is a fork of your example that is working as expected:



Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites



In the transition context file, just set the initial value for the completed boolean to true.

const [completed, setCompleted] = useState(true);

Since the boolean is always set to false in the onEnter hook it should work as expected. Just in case though as an extra safety measure I moved the toggle method to the onExit hook of the transition component just in case:

onExit={(node) => {
    .timeline({ paused: true })
    .to(node, { scale: 0.8, duration: 0.2 })
    .to(node, { xPercent: 100, autoAlpha: 0, duration: 0.2 })

That seems to work as expected.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...