issue with pinSpacing ?

[sybilrondeau]

Hi. I have an issue that appears only when I try to resize the nav : the whole portfolio div falls eventually on the contact div. If I refresh, everything goes to normal. I tried with pinSpacing: false and manually add some space under the portfolio div but the issue remains the same. What did I do wrong ? I spotted the same behavior on a tutorial online using pin: true. https://www.williamrchase.com/post/scrollytelling-with-gsap-scrolltrigger/

See the Pen QWyjRzr by sybilrondeau (@sybilrondeau) on CodePen

[GreenSock]

I believe this was already fixed in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache). 

 

Does that resolve things for you? 

[sybilrondeau]

Yes it seems ok with the next release ! When could I be able to download it to my real project ? 

Thank you ! 

[ZachSaucier]

12 minutes ago, sybilrondeau said:

When could I be able to download it to my real project ? 

You can save it to a local file and start using it now if you'd like. We'll have the next official version out by the end of the weekend.

[sybilrondeau]

Yes ! Thank you  

[sybilrondeau]

It is better with 3.3.4 but I still have the issue sometimes... 

[GreenSock]

Can you please be more specific and tell us exactly how to reproduce the issue?

[sybilrondeau]

It's perfectly fine in codepen, but in my local project I still have the issue (I upgraded with 3.3.4) when resizing manually the browser.

[ZachSaucier]

It's hard for us to help debug that. Can you please try to recreate the issue on CodePen? It might help to keep stripping parts of your local project until you get to the bare minimum of what you need to recreate the issue.

[sybilrondeau]

I understand ! When I updated gsap I just did npm install .gsap-bonus.tgz again (the new one), is it ok ?

[GreenSock]

2 hours ago, sybilrondeau said:

I understand ! When I updated gsap I just did npm install .gsap-bonus.tgz again (the new one), is it ok ?

As long as you downloaded a fresh copy (3.3.4), sure. Maybe you should console.log(gsap.version) just to make sure. You could also uninstall everything GSAP-related and then do your npm install ./gsap-bonus.tgz again.

[sybilrondeau]

So I updated codepen with exactly what I have in my local project, and I think what's wrong is the media query I put in my JS with matchMedia... because now I can see the issue in codepen when I resize the screen. What's wrong ? How can I do if I want this script to apply only when the screen is 900px and more ? And not only on refresh ? 

[ZachSaucier]

You need to kill off the previous ScrollTriggers and tweens. We're working on some related things internally. I will keep you posted.

[GreenSock]

We're experimenting with a new API that'll make this sort of thing easier. Here's a fork of your demo with that in place (and a bunch of notes): 

See the Pen 4d16e4b18b257e7299af27ee91f23c4d?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It uses a prerelease/experimental version of ScrollTrigger. 

 

Does that work well for you? 

[sybilrondeau]

Yes very well thank you ! Can I use it already on my real project ? When will it be released ? 

[ZachSaucier]

3 minutes ago, sybilrondeau said:

Can I use it already on my real project ? When will it be released ?

Sure. Just know there might be more bugs  We hope to release it in the next week or two.

[sybilrondeau]

I understand. Thank you very much. It's awesome to have access to this kind of help here. 

[ZachSaucier]

You've been very helpful in finding little bugs in our new ScrollTrigger plugin  So thanks for your help.

[sybilrondeau]

Hi ! I installed the new released ! Media queries works well except another bug ! My last picture disappear when resizing down the screen and doesn't come back when resizing up until I refresh... 

[ZachSaucier]

@sybilrondeau Please make a minimal demo for us to take a look at  

[sybilrondeau]

same Codepen I updated : 

[sybilrondeau]

I found out ! I simply forgot to save the state of the third slide.