Unthink

No problem. Thanks @GreenSock Jack!

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

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

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? https://codepen.io/phlp/pen/ZEoabVX Sorry for the load of questions... I'm struggling to get this feature signed off cheers Philip

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

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

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: https://codepen.io/phlp/pen/QWrqMjq I'm hoping it a simple fix Thanks Philip

@Rodrigo You are a legend! This is amazing. Thank you so much for input. Yes, as you said i was without doubt overcomplicating the code!

@GreenSock Just a quick question, if i wanted to have multiple sliders running on the same page... (exact same functionality and markup - just with different content) is this possible? and is there an example of this in the documentation? thanks!

Hello! I've built a css grid that uses a rangesider to change the grid column sizes. The changes are stored so that the grid choice is persistant across the site. It works but i'd love to add some staggering animation to the size changes. https://unthinktest.xyz/levine-leavitt/ (as you can see it needs some transition animations!) The codepen demo i've built is using this pen (https://codepen.io/animadraw/pen/rNxPKjL) as inspiration, and it's using the Flip plugin. Perhaps i'm now getting confused between the 2 ideas, so any help or pointers would be much appreciated. Currently the staggering animations are not overlapping... Thanks Philip

Thanks Jack! Yes, that's fixed it! Thanks alot for your help

Hi Jack + Rodrigo! Thanks alot for you time and input.. you got me pointed in the right direction for sure, I've updated my pen now: https://codepen.io/phlp/pen/WNJEoZe The only issue i noticed is when there is a <video></video> tag within the slide-box and you drag it across its like the video is on a separate axis - perhaps it's a simple fix and in fact it seems to resolve itself when you resize the screen, see: https://unthinktest.xyz/levine-leavitt/artist/steven-wilson/ Again, thank you so much for your help! cheers Philip

Hi there, I found a really great example pen here: https://codepen.io/GreenSock/pen/qBYqYGg However i'd like to have variable widths on each slide as my gallery will have lot's of image types within e.g square, portrait and landscape When i remove "width: 100%" from the slides they start to overlap and look glitchy See actual w.i.p site: https://unthinktest.xyz/levine-leavitt/artist/peter-funch/ I've remade the slider section in codepen also: https://codepen.io/phlp/pen/WNJEoZe Any help or pointers would be much appreciated! thanks Philip