Multiple Marquee slider issues

[Unthink]

Hi all!

 

I've already had some great input from the guys on this particular project and it's really coming together now

 

I'm now encountering an issue when i have 2 marquee sliders on one artists page, as the 'load' event listener doesn't seem to behave like it does elsewhere on the site (for example on the homepage: https://unthinktest.xyz/levine-leavitt/ and news page: https://unthinktest.xyz/levine-leavitt/latest-news/)

 

Here's an example artists page that has the issue:

https://unthinktest.xyz/levine-leavitt/artist/stills-strokes/

1. More Artists Marquee slider (bottom of the page) - the items break when dragged - but fix when window is resized

2. Artists modal gallery - click on "Recent Work" (+scroll to bottom of the page)  - the slider is in fact displayed within a magnific popup instance. The slider doesn't autoplay onload but works when window is resized

 

I've also made a quick codepen demo: The "Portraits" gallery has issue with the slider within the magnific popup: 

 

I'm hoping it a simple fix 

 

Thanks

Philip

 

 

See the Pen QWrqMjq by phlp (@phlp) on CodePen

[Rodrigo]

Hi Phillip,

 

Great job, site looks good!

 

Honestly I found a bit harder to follow the codepen sample and see what the issue is/could-be. If you could isolate as much as possible every issue you're having it would be great, since it's a bit complicated to follow over 600 lines of HTML is a bit hard with all the JS is a bit hard. I see you're using a couple of jQuery plugins, have you tried removing GSAP and test just the plugins and see if they're working as expected? Have you tried isolating just the slider with the plugins and see if that works? Another option is to remove the plugins and test just GSAP and see how that works.

 

Finally in your live site you have an error in your console:

(index):4543 Uncaught TypeError: Cannot read properties of undefined (reading 'offsetLeft')
    at horizontalLoop ((index):4543:25)
    at (index):4520:16

Here:

startX = items[0].offsetLeft,

That's why your slider is not working and why it works after a page resize.

Hopefully you can isolate as much as possible and create live samples that are as simple as possible for us to help you with this. If you can't later I'll have some extra time and I'll see if I can spot anything.

 

Happy Tweening!

[Unthink]

Hi @Rodrigo, thanks for getting back in touch

Apologies i can appreciate it a bit of a mind field - perhaps as you suggest i will try and remove or at least attempt to simplify the current implementation. In fact the magnific popups have been quite problematic so i'm sure there's a better solution that will best work with gsap. It seems like the rangeslider effect (to adjust the page grid) is also causing some issues... Time for more head scratching and coffee i think!

 

cheers

Philip

[Unthink]

Hi @Rodrigo

 

Just coming back to you on that error again

I was able to remove and simplify the code to the bare minimum but each time i still encounter this error:

 

startX = items[0].offsetLeft

 

Is there any workaround to replace this attribute in the code?

 

Thanks

Philip

[GreenSock]

It's tough to say without a minimal demo, but my guess is that whatever items you're feeding into horizontalLoop() don't exist at that point. So you're basically asking it to create a horizontal loop on zero elements. You might want to try a console.log() right before that function call to verify that the items you think you're passing in are actually what you think they are.

[Unthink]

Hi @GreenSock Jack!

Thanks for responding back to me.

Apologies, just to break it down a bit more simply for me, are you saying i should check to see if the images are fully loaded before i call the horizontalLoop(); function?

 

I'm running different logs on the site and i can see the slider and the horizontalLoop logs are being called before the entire page is loaded - is that where my issue is do you think? So it's a hierarchy issue - i should change the order of scripts perhaps?

 

Can you check my pen again, just to be sure im using the correct order for the functions and is it best to include to as a separate js file or combine it with my other custom js functions?

 

See the Pen ZEoabVX by phlp (@phlp) on CodePen

 

Sorry for the load of questions... I'm struggling to get this feature signed off

 

cheers

Philip

[GreenSock]

I don't see any errors in the console in that CodePen - do you have something that clearly shows the issue you're running into? 

 

I was just saying that you should make sure that the things you're trying t animate actually exist when you're trying to animate them

 

For example...

const boxes = gsap.utils.toArray(".slide-box");

console.log(boxes.length); // better not be 0!

horizontalLoop(boxes, {...});

I'm not sure how your page is structured, but sometimes I see people put the <script> at the top, like above the <body>, thus the element's don't even exist yet (the browser hasn't parsed them). So you could wrap your code in a window "load" event handler, yes. 

[Unthink]

Hi @GreenSock Jack!

Thanks for providing the example and sorry i'm just continuing to work my way through the project

 

I've reworked the code and placement in the page order to see if that fixes things on the pageload but i still get the same issue and the console log does throw up some interesting results:

 

1. First, when i check if the slider element exists - and yes it does, console: "Slider exists" (wrapped in window load event)

2. Then i count number of boxes (as per your example) - console shows "0"

3. Then count then console shows "4"

4. Then indicates in the log that the page is fully loaded

 

Please have a look at this page: https://unthinktest.xyz/levine-leavitt/artist-in-residence/

- the slider moves but breaks on drag

- there is an error still on re: OffsetLeft

 

Apologies again if im getting mixed up but would love to get a better understanding of where i might be going wrong

 

Once its resolved for this instance - it will be used across other components on the site so would be an amazing feature to have!

 

Look forward to hearing back from you

 

cheers

Philip

 

[GreenSock]

We really can't troubleshoot live sites effectively - there are way too many factors and it's too hard to tinker. But from a quick glance, it looks like my theory is correct - you're trying to create 2 horizontal loops with ZERO boxes. Look at the console - there are two zeros being logged. 

 

It looks like you're looping through each section and inside each one, you're trying to create a horizontal loop for all the boxes inside of it...but two of those sections don't have any boxes at all. So adjust your code to skip creating the horizontal loop in those cases. Sorta like: 

if (boxes.length > 0) {
  const loop = horizontalLoop(boxes, {...});
}

If you still need help, please make sure you provide a minimal demo in CodePen or something. Good luck!

[Unthink]

Hi @GreenSock Jack,

I really appreciate you throwing your eye over this again

 

That actually did the trick and i no longer see the console error plus the slider works now in almost every component usage - apart from 1 page - but i'm currently trying to figure that out... as ever a head scratcher but i must have something a miss in the template

 

To close this off - I have one more question:

 

Currently the slider initialises on the window load (and fine for the slider visible on the page) but is there a condition to call the slider to initialise when a modal is opened (for a slider that not currently visible on the page)?

 

thank you thank you thank you again!

 

All the best

Philip

[GreenSock]

30 minutes ago, Unthink said:

Currently the slider initialises on the window load (and fine for the slider visible on the page) but is there a condition to call the slider to initialise when a modal is opened (for a slider that not currently visible on the page)?

Sorry, @Unthink, but you haven't shared a minimal demo where we can see the code clearly and that isn't really a GSAP-related question (see the forum guidelines) so you'll need to just find where in your code you're handling the modal and insert the appropriate code there. Good luck!

[Unthink]

No problem. Thanks @GreenSock Jack!