Nick.Ls

Hi @Rodrigo, I've tried with all kind of resistances but yet the problem still occurs in any situation. For better understanding I am sending a video recording over. As you may see even if I am dragging slowly the carousel (touch device) the carousel at some point triggers an extremely fast rotation that doesn't make sense. I've tried changing the ration onPressInit function to half that seems to make things a bit slower but still doesn't help me that much. Weird behavior at the end of the video. gsap_carousel.mp4

Thank you for the quick reply @Rodrigo, dragResistance is already tested but it doesn't prevent that weird behavior where the carousel will randomly on drag loop through all the items like 10 times in a sec... That's why I asked if I should search for an option where the carousel would rotate only a couple of items at each drag. I would try inertia resistance since I haven't tested it yet and come back with my results.

Hi everyone! @GreenSock Coming back with an update on the horizontal loop helper. It looks like that the carousel gets to scrolled way to fast in some situations whilst dragging, especially in touch devices. Is there a way to minimize or declare the items that it should scroll into view? I've tried to change the snap function but doesn't seem to work... snap: value => { let time = -(value * ratio) * tl.duration(), wrappedTime = timeWrap(time), currentIndex = tl.closestIndex(), targetIndex = getClosest(times, wrappedTime, tl.duration()), maxMove = 2, newIndex = Math.max(currentIndex - maxMove, Math.min(currentIndex + maxMove, targetIndex)), newTime = times[newIndex], dif = newTime - wrappedTime; // Adjust the difference to wrap around the timeline if needed if (Math.abs(dif) > tl.duration() / 2) { dif += dif < 0 ? tl.duration() : -tl.duration(); } return (time + dif) / tl.duration() / -ratio; },

I am preloading the fonts to be honest but I will set the animations based on that and see what happens. For the time being I have a workaround already for my scenario. Thank you once again!

I am executing the entire splitting / animation function on document loaded. document.addEventListener('DOMContentLoaded', function() { Shouldn't this be include the fonts loaded? Thanks!

Hi everyone, hi @Cassie, I am coming back with the same problem that after the client used his website the problem occurred in mass situations. Troubleshooting it further I came to a final result where let me first simplify the setup. We have a <h1 class="text-uppercase"><?php get_the_text ?> </h1> element. The heading's text is being populated through the backend of the website. Also through the text-uppercase class the text is always being transformed to uppercase. Now the problem occurs whenever the user places a lowercase text. The splittext plugin is splitting the text as it should (lowercase) and the animation breaks whenever it is triggered. If I place a capitalized text from the beggining everything works as intended. Basically looks like a splittext bug rather than scrolltrigger for me. Or the scrolltrigger can't calculate correctly through the css transformation. I hope I gave you a more clear view of the problem and hopefully help you troubleshoot further or at least guide the next one with the same problem.

@Cassie This looks like it made everything work... Now the triggers after the horizontal scroll trigger at the height it should. Thank you! ScrollTrigger.create({ refreshPriority: -1, // lower priority makes it happen later in the refresh() calculations ... });

Possibly a solution to look at because its the first thing that makes sense so far... Also, those two scrolltriggers are in 2 different files... so how are called and calculated is possibly the reason they trigger in wrong positions. I'll investigate further and let you know.

I am coming back with a codepen that replicates my setup but not the issue unfortunately. https://codepen.io/Nick_Ls/pen/jORmzLo In my case I can see from the markers that once you enter the horizontal container the vertical scrolltriggers below don't calculate the scroll height and come in sooner. As a result the animations play a lot sooner whilst the user is not even yet in the viewport.

I have triple checked the code for any inconsistencies and no lazy loads are on the page or the website entirely to be exact. Hopefully I'll get you a sample in codepen soon. Thank you for you time either way!

Same case scenario @Cassie, where in my case the first vertical panel should have the title "vertical" to reveal but I am getting it either broken or already revealed... will add the markers and debug further but that's the case anyway.

Hi @Cassie, There are two fullwidth containers next to each other (200vw). While you scroll the website downwards, at some point reaching the horizontal containers you will have to scroll horizontally in order to complete the scroll. It's not mandatory, it's part of the page scroll. My question is, does the horizontal scroll by any chance makes the trigger position of the next elements to get misplaced? Should I scrolltrigger.refresh() after the horizontal scroll maybe?

Hi everyone, I didn't had the time to set a codepen, yet. But I made a simple test by adding some space before the heading just to give it a bit more of space between that and the horizontal scroll. And it seems it works. The triggers though come a bit sooner so I can't see the actual animation but it looks like it works. Is there a change the scroll containers to break somehow the scrolltrigger position of other elements? Thank you in advance.

I'll try reproduce the issue if possible... That's another challenge either way... hahaha So far can't seem to find any solution. And I am not recreating the ST at any point. I'll get back to you with a codepen if possible later today or tomorrow. Thanks!

I will take the fonts load under consideration although I am already running the scripts after the entire page has loaded. The entire website is based on the same formats and setup so it still is weird that three headings one after the other would work except the middle one for example. Everything triggers in the exact markers shown except that heading. I've stripped down the entire website, script and CSS wise. Event html and still that section breaks. Refreshing the page whilst you are in the footer and scrolling up looks like the heading has been revealed. Also if you refresh in a specific position it tries to reveal and somewhere in the middle stops. That's the weird part. that the animation begins and stops at some point. I've even tried to manually scrolltrigger.refresh() after the last animation to recalculate any heights that may be responsible for breaking the calculations of scrolltrigger but no luck. I've also tried with GSDevTools, removing the scrolltrigger and trying to animate ONLY this specific heading and no other. Didn't get any respond on that case either. I don't know if the live page would help you check what's happening. I am going to keep trying the debugging until I get a mental break down (lol) or eventually remove the animation on that part.

I've tried creating a demo but won't "bug" there. I am not using react, just plain js. Code runs only once. Latest version always. @GreenSockWhat do you mean by proper cleanup?

Thanks for the swift reply, No, I never use transition all. CSS has been removed entirely and still that heading is not firing. 10px above there is a subtitle that would work if I place the same function (again, weird!). I've also changed the end of the horizontal scroll but nothing.

I am also giving you the code on how I horizontally scroll 2 containers // HORIZONTAL SCROLL SECTIONS mm.add("(min-width: 992px)", () => { let horPanels = gsap.utils.toArray("#section5 .panel"); gsap.to(horPanels, { xPercent: -100 * (horPanels.length - 1), ease: "none", scrollTrigger: { trigger: "#section5", pin: true, scrub: 1, snap: 1 / (horPanels.length - 1), markers: true, // fastScrollEnd: true, // preventOverlaps: true, // end: () => "+=" + document.querySelector("#section5").offsetWidth, // end: () => `+=${document.querySelector("#section5").offsetWidth + window.innerWidth}`, end: () => '+=500vw', } }); });

Greetings everyone! Happy to be here once more and pitty with another problem that will drive me crazy! I have a function that searches for sections and a specific class that will reveal the headers of my liking. I've been using for some time now with no problems. After some point of development on a specific page, a title that should animate is not animating... sometimes it starts and stops but mostly is not triggering. Markers recognize the point that it should start the animation but passing by won't fire at all. Never seen something like this with scrolltrigger. Unfortunately I can't replicate the setup or bug in codepen since as I told you before, it always works! I am pasting below the function just for your reference. Only thing to mention is that I have 2 full width sections on horizontal scroll just above the heading that follows below but even removing the entire html code and scripts still this heading won't fire... I assumed at a point that it might mess with scrolltriggers calculations but that's not the case either. Sometimes if I refresh on a specific position it "tries" to animate and stops as seen in the image below. Any ideas? function splitTheHeads() { let sections = document.querySelectorAll("section"); let splitTextArray = []; sections.forEach((e) => { let headText = e.querySelectorAll(".anim_head"); if ( headText.length > 0 ) { // split texts headText.forEach((elem) => { var mySplitText = new SplitText(elem, { type: "lines, chars", linesClass: "split-line", charsClass: "split-char", }); let triggerPos = elem.getAttribute('data-trigger'); let tl = gsap.timeline({ scrollTrigger: { trigger: elem, start: triggerPos === "bottom" ? "top bottom" : "top center+=33%", // toggleActions: "restart none none reset", fastScrollEnd: true, preventOverlaps: true, }, }); tl.set(headText, { autoAlpha: 1 }) .from(mySplitText.chars, {duration: 1.25, ease: "expo", opacity:0, yPercent: 100, stagger: {amount: 0.5} }); splitTextArray.push({ element: elem, splitText: mySplitText }); }); } }); // Revert mySplitText instances on window resize window.addEventListener("resize", function() { splitTextArray.forEach(({ element, splitText }) => { splitText.revert(); gsap.set(element, { autoAlpha: 1 }); }); }); }

Hi @Rodrigo, I figured it out... ScrollTrigger.normalizeScroll helps with the window scrolls as stopPropagation too but it needs to be tested in any case since it still worked a little bit buggy in the beggining. Basically you need to target the correct container. As for the Inertia bug I found out that adding a border to the #scrollContainer prevented the user to drag back to the first slide. Using outline instead worked for me. After all this time it was basically a CSS fault. I am leaving the codepen with the bug and a comment for anyone who might need it to use outline instead. At least for this case scenario. Hopefully it will help the next one trying to do something similar. Thank you all for your time and effort!

Hi @Rodrigo, Thank you once again for your time and effort. Great character of your behalf and really appreciate it! Amazing community I have to say once more and is a great pleasure to be part of it! On to the task, it seems that CSS is preventing from correct render of things... I've just found out after breaking it down 100 times that some of the elements need a specific height or CSS alteration in general to work, even if I change it through JS afterwards to match my design needs. If anyone stumbles upon my codepen in the future let me know if you face any problems and I will help you out. The only problem that still exists is the windows scroll along with inner container's scroll which also looks it works in codepen in my setup it does not. Even in a clean white page I still get the same problem. I would try to troubleshoot further and update the answers here for anyone who might need it in the future. If anyone else has faced similar behavior between scrollsmoother and inner container scroll let me know if you have any suggestions... Until then... Thank you all! Thanks Rodrigo.

I figured out that the inertia plugin is preventing me to drag back to item 1 for some reason... but as I said only happens to my demo website for some reason and can't replicate the effect on codepen.

Hi @Rodrigo! Great help so far! Love you all and love GSAP !!! Your comments have helped me in a lot! I have updated my codepen accordingly to your notes, I also used scrollsmoother to my setup as it should be. Inertia + throwResistance did the trick too. Additionally I have given my full setup as is in my demo website, including navigation and progress bar. Regarding your comment on the dragEnd function, I updated the function to accommodate the wheel animation and removed the onDrag event from it since it was indeed not needed. I need the function generally in order to update the indexes and progress as you may see now. The weird thing is that I am still getting the window scroll along with the container scroll in my website although it works in the codepen so I believe I'll have to break it down or start over on that to troubleshoot further. Unless you have any other suggestion on that... And another weird thing is that in my website, using the exact same code as codepen I can't drag back to item 1. I can scroll it, I can get there through the nav but can't drag back to that... I've been trying for hours and hours to understand why but still can't figure it out... I think I am going to redo that too... In case you see any mistakes in the code so far please do let me know!

Thanks for the quick reply @Rodrigo! Indeed inertia only removes the flickering as you mentioned! Thanks for that... Although I got to figure a way to drag only one item each time. Got any ideas on that? Maybe with dragDistance calculations? Not sure yet... As for preventDefault, you are correct on that too but in my live case scenario I also use scrollsmoother where it complicates things and as I see it does not work. Any similar solution for scrollsmoother? Thanks again!

Hi everyone! My setup is supposed to be easy. A container that will be populated by images, boxes in my situation that needs to be scrollable and draggable. Each scroll or drag should move by one box. So far I have created the animation that I want but I am facing with two problems. The first one is that on drag there is a small flickering in the animation and the second problem is that when I scroll inside the container I get the window scrolled also which is not right. Any suggestions are very welcomed! Thank you.