MikeFries78

Jack thank you again, thanks also for building a great community.

For specificity and clarity, it would be like the equivalent of the join line between the pink and black sections in the codepen above, except I'm using background svgs to create one continuous effect to look like a single long background being scrolled along. There are features like you can see which match between two backgrounds that neighbour each other, and in mac for example it's perfect. But for Opera consistently and some cases involving Windows, the join lines clearly show the equivalent of the join between the pink and black area, which I'm attempting to mask. Sometimes the lines will only show during scrolling and then will disappear when the horizontal scroll is stagnant. For scrub: 1 for the scrolling effect, these lines are present in every screen/browser combo. So I'm using scrub: true, which removes it for most screens, but evidently not all.

Thank you again Jack, this really helped a heck of a lot! If you don't mind one last quick follow up question: when horizontal scrolling, I've got background images for each "section" (view-sized individual section the container is "scrolling" along horizontally"), and right now on some screens/resolutions/browsers, there's a pronounced join line showing between the background images. Here is a good example of what I'm referring to: https://imgur.com/O4k1NxN Have you ever encountered these kinds of join lines? The images are pixel perfectly aligned, and in a little over half of the browsers it's totally clear: https://imgur.com/Taj3IqB Thanks again for your help, I know you don't have all of my code to make a full recommendation, but I just wanted to check if off the top of your head you know about this or have encountered it before. It's the last thing I have to wrap up and my first of many projects with GSAP is a wrap.

Apologies in advance if the codepen isn't scrolling. I've tried to figure out why this is for an hour, and I'm using the same relevant code I'm using in my next.js app and it's scrolling fine there, but not in codepen. If someone can advise what I'm doing wrong that preventing the minimal case from working, it would be seriously appreciated. The issue I'm facing is that horizontal scrolltrigger is working for ioS, mac and windows, but not for android. Behaviour on android: - scrolling down doesn't move the view to the right, but into black space below the initial starting point. - scrolling right will move the view to the right, however it will only be able to scroll for about 4 of the 11 sections and cannot scroll further than that. Everything is perfect for other device types, I'm guessing it's something to do with x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px" or.. end: () => "+=" + (container.offsetWidth - innerWidth) and this impacting android differently to other devices somehow. Again, apologies for the codepen, I'm trying to conform to what you guys expect and haven't been able to spot the issue with that rendering correctly. Thanks kindly for any advice.

Hey Jack, thank you I'll do exactly that. Also pardon by use of (clearly ?) incorrect terms. By sections I just meant the horizontally stacked individual full width screen sized areas that I have which the container is viewing (my understanding is it doesn't actually move along them but I'm quite new to GSAP and learning). Thank you for taking the time to provide some guidance.

// H Scrolling const tl = gsap.timeline({ ease: "none", scrollTrigger: { trigger: container, start: 'center center', pin: true, scrub: true, invalidateOnRefresh: true, end: () => scrollWidth, onUpdate: (self) => { gsap.set(container, { x: -self.progress * scrollWidth }); }, }, }) My next.js app is using horizontal scroll using the code above, and for one of the sections I'd like: - there will be two blocks of text stacked horizontally - as the container scrolls into that section I'd like the two blocks to enter view, one coming from above and one coming from below and both ending their their stacked positions - should be scrub:1 also so that if the user scrolls back past the centre point of the view that the two sections move back of the view in opposite directions. If anyone can point me in the direction of relevant threads for this effect, especially ones that handle this effect for a horizontal scrolling app, that would be appreciated.

Hey Rodrigo, Thanks kindly for you reply, it means a lot as I've been a bit lost. That thread is indeed very relevant. One quick follow up if you don't mind, and from here I'll be able to work my way through it. Is there the functionality for pinning at the section that has this animation already included in the codepens in the thread you referrer? If not (my assumption), can you briefly explain how to add pinning while the "wheel" is spinning, and then allowing for continuation of scrolling after that? Thanks again for your help, and I appreciate those amongst you who volunteer your time to help out people like me.

I hope I didn't say something wrong, my request is the only one posted in the last 3 hours without any replies at all. I've changed my username and some of the wording any case you guys found them offensive in some way (previously "gscoder" and using the term carousel effect instead of image animation). If you'd like it to be phrased in a different way to explain better then please let me know. Also if this isn't the right place for new people to the forum to post requests like this, please also let me know and I'd be happy to post in the correct place.

Hello, I'm new to the forum but have worked with GSAP a bit previously. Thanks for this great resource. I'm creating a site which I'd like to have an image animation in the same way as https://days.christou1910.com/en/ in the products section about 5 or 6 views in. For clarity, it has the text "Days Comfy" next to the effect I'm referring to. Can anyone point me in the right direction to replicate this? Any specific animations that should be used?