Bug pin ScrollTrigger gsap version 3.11.3

[Irsyad Ilham]

I found bug with version 3.11.3

 

pin on ScrollTrigger not working as it should. The item to pin suddenly goes down. I open inspect tool and I found the transform (translate y axis) change to end value once reach start marking

 

I downgrade the version, then it all work as it should

[mvaneijgen]

Hi @Irsyad Ilham welcome to the forum!

 

Do you have a demo of the code you used that demonstrates the bug, that would be really appreciated and what is the version you downgraded to where the bug isn't occurring? 

 

When we can confirm that it is a bug @GreenSock will probably provide you with a temporary fix and it will be fixed in the next version.

[Irsyad Ilham]

Here is the code

 

just simple pin feature, nothing fancy

 

ScrollTrigger.create({
  trigger: texts.current,
  pin: true,
  start: '+=200 center',
  end: '+=' + (container.current.offsetHeight - 700)
});

 

I downgraded to 3.11.0 version, then its working

[Rodrigo]

Hi,

 

Unfortunately the small code snippet you're adding doesn't shed much light on anything. Honestly I can't see what could go wrong or right with those six lines of code.

 

It seems that you are using React, please feel free to fork either of these codepen examples using React and ScrollTrigger and show us the issue:

See the Pen gOzxzqv by GreenSock (@GreenSock) on CodePen

 

See the Pen zYjdoNo by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

[GreenSock]

Yeah, we definitely want to fix any bugs that exist, but we need to be able to reproduce the issue in able to confirm it's a bug and then fix it. Nobody else seems to have reported any similar issues. So far, we have nothing to go on, so like @Rodrigo and @mvaneijgen said it'd be SUPER helpful if you could provide a minimal demo please. Thanks! 👍

 

By the way, your start value is invalid: start: '+=200 center'. Relative values ("+=") are only valid for the end because it's describing an offset from the start, like end: "+=200" would mean "200px beyond the start position". But that doesn't make any sense in the context of a start value (where would it be relative to?) Perhaps you meant start: "200px center"? 

[Irsyad Ilham]

Here is codesandbox.io link

 

https://codesandbox.io/s/magical-leakey-79k9x6?file=/src/App.js

 

When scroller-start hit start mark the box immediately drop down. Once I switch version to 3.11.0 it just works fine

[Rodrigo]

Hi,

 

Thanks for providing the demo.

 

The issue is resolved by using GSAP Context in a React setup.

https://greensock.com/docs/v3/GSAP/gsap.context()

 

This most likely has to do with React's Strict Mode, since in a vanilla setup it works as expected:

See the Pen yLEJwqE by GreenSock (@GreenSock) on CodePen

 

Here is a fork of your codesandbox using GSAP Context:
https://codesandbox.io/s/ecstatic-morning-ir7swh?file=/src/App.js

 

Let us know if you have more questions.

 

Happy Tweening!

[Irsyad Ilham]

It's working. thanks