ScrollTrigger issue : Pin doesn't work | NextJS 13.5.6

[Guillaume Ducuing]

Hello! I have an issue with ScrollTrigger; I want to pin the container on scroll to start with (then I will animate some elements). I have done this in several projects with the same code (same imports and same structure), but in this particular project, it doesn't work. In fact, the container just "jumps" instead of following the scroll. Do you see anything in the provided code that could help me? Thanks! (I wasn't able to get the CodePen preview to work, but here is the link for the CSS + JSX, and I'll also include a video to show the current result.)

  "dependencies": {
    "@gsap/react": "^2.1.1",
    "gsap": "^3.12.5",
    "next": "^13.5.6",
    "react": "18.2.0",

  },

 

See the Pen OJYMJPa by Guillaume-Ducuing-the-bashful (@Guillaume-Ducuing-the-bashful) on CodePen

[mvaneijgen]

Hi @Guillaume Ducuing welcome to the forum!

 

I cant see anything obvious from just the code snippets. Codepen isn't always the best platform to get your demo ready, have your seen our Stackblitz starter templates these gets you up and running in most of the major frameworks. 

 

What I can see is this line in your CSS `transition: all 0.35s ease;` which always is a red flag. If you have an animation with GSAP on an element and this line of CSS will interup all animations and things will break. Due to not having a demo I'm not able to test it for you to see if this fixes the issue, but personally I would not use the word 'all' and always define the properties I want to transition and never transition an property that GSAP is also animating. 

 

Hope it helps and if not try and see if you can reproduce the issue in one of our stackblitz templates and we will be able to help you debug and happy tweening! 

[Rodrigo]

Hi,

 

As Mitchel mentions is super hard for us to do much without a working demo, so checking our Stackblitz collections (the NextJS one) should be a very good first step.

 

Finally I'm  curious about this:

tl_slide.from(el[1].current, {
  x: -100,
  // opacity: 0,
})

Those elements you are animating there are the same ones that have these styles applied to them?

.el {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  transition: all 0.35s ease;
  padding: 40px;
  &:nth-child(1) {
    padding: 40px;
}

Animating an element that has CSS transition all with GSAP is generally a bad idea as Jack explains here:

Hopefully this helps.

Happy Tweening!

[Guillaume Ducuing]

Hello, thank you for your answers. Indeed I should have cleaned the css before posting... I finally found the solution, I had left a mixin in my globals scss which was preventing it from working properly:

@mixin containerInit($containerName: section, $containerType: inline-size) {
container-type: #{$containerType};
container-name: #{$containerName};
}
section,
header,
footer {
  &:not(.customContainer) {
    @include containerInit();
  }
}

Thank you for all your advice and also for the Stackblitz starter templates, next time I will use them !

[Rodrigo]

Hey Guillaume,

 

Is great that you were able to solve this! 🥳

 

Thanks for reporting back!

 

Happy Tweening!