Issue with pinned section

[JelmerOT]

Hello,

 

I seem to have an issue with a pinned section. Here's the demo website (password: sesam): dev.orangetalent.nl/over-ons.

The section with the issue has a title of "Onze vier beloften voor écht succes" and an autoplay accordion, it supposed to be pinned and the contents should be vertically centered within the screen. But with markers enabled the start starts in the wrong position.

 

The same section is found on the homepage, where this problem does not exists. Might it have to do with the animated sections above?

 

[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 the gsap-trial NPM package for using any of the bonus plugins: 

• 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. ✅

[mvaneijgen]

Hard to say without a minimal demo (in which we can inspect/edit the code), sounds like you might want to use refreshPriority if you're creating multiple scroll triggers that you do not create in order in which they appear on the page  https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

But again hard to say, if t does not solve your issue please provide a minimal demo so that we can help you debug. 

Quote

refreshPriority

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

Hoop dat het helpt en veel geluk me je project!

[JelmerOT]

Figured it out. The blocks/sections above the pinned section had lazyloaded images, which when loaded, changed the document height. That changed the top position of the pinned section which resulted in a wrong sticky/pinned starting position.

 

We made sure the height of the images are always present, so that the document height doesn't change.

[Rodrigo]

Hi,

 

Indeed using a fix height is a solid approach and if it works then use it. Just as an FYI you can also use the refresh method after a new image(s) are loaded:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

 

Here is a demo that adds new elements emulating an ajax response, but the approach is the same:

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

 

Happy Tweening!