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.