Start property problem

[Leptitnouveau]

Hello,

 

So I have this weird console problem, if you click on a link from the header it will lead you to the corresponding section. But if you reduce the width of the screen until it is the tablet version (under 1000px) and then go back to the PC version. The function will still work, but this error will appear.

 

I thought it was because I activated ScrollTrigger when the screen size is under 1000px so I used this: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

but the error still appear...

 

If anyone has an idea why please let me know.

Thank you in advance 🙂 

See the Pen OJaJLYW?editors=1111 by Leptitnouveau (@Leptitnouveau) on CodePen

[Cassie]

Heya!

 

Easy thing to run into, this is due to not cleaning up your event listeners correctly.

Here's a minimal demo, I've given you a better way to handle multiple links to as it looked like you were just copying the bit of code I gave you a while back for each link, you can loop around them and grab a data attribute, might make your code a little easier for you to parse? If not no biggie, feel free to create individual event listeners.

See the Pen WNYNbjq?editors=0011 by GreenSock (@GreenSock) on CodePen

And here's an explanation - 

 

 

[Leptitnouveau]

Hello,

Thanks for the answer I did not know about the data thing, I tried to create a function to not have multiple Event Listener but I couldn't pass the label as a parameter (Probably my mistake).

 

When you mean cleaning the Event Listener, it means removing the listener?

And is it possible that gsap.matchMedia create conflicts with window.matchMedia if I use it too on my JavaScript? Because I tried and a part of the animation keep working under a width of 1000px 😕

[Cassie]

3 minutes ago, Leptitnouveau said:

When you mean cleaning the Event Listener, it means removing the listener?

100% - this isn't a GSAP specific thing, it's a JS thing. In this case if you're adding an event listener on desktop, then sizing down to mobile the event listener will still be active on mobile unless you remove it.

 

Quote

And is it possible that gsap.matchMedia create conflicts with window.matchMedia if I use it too on my JavaScript? Because I tried and a part of the animation keep working under a width of 1000px 😕

I think it's probably more likely you're not using matchMedia properly, it can be a bit fiddly, do you think I could see the code you've written for the implementation? Maybe I can spot the issue.

[Leptitnouveau]

12 hours ago, Cassie said:

I think it's probably more likely you're not using matchMedia properly, it can be a bit fiddly, do you think I could see the code you've written for the implementation? Maybe I can spot the issue.

Yes of course: 

See the Pen OJaJLYW by Leptitnouveau (@Leptitnouveau) on CodePen

I have discover this method on w3school

It is the line 202. When the screen is under 1000px I take every images from my content and put it to a div that will become the right page when the screen width is over 1000px.

12 hours ago, Cassie said:

100% - this isn't a GSAP specific thing, it's a JS thing. In this case if you're adding an event listener on desktop, then sizing down to mobile the event listener will still be active on mobile unless you remove it.

Alright, now I get it thanks a lot!

 

By the way, this is a work for school. Are you ok with the fact that I mention you in my credit page for the function that you gave me?