ScrollTrigger Not firing

[Nick.Ls]

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 });

        });

    });

}

Edited March 17 by Nick.Ls
Update

[Nick.Ls]

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',

        }

    });

});

[mvaneijgen]

39 minutes ago, Nick.Ls said:

... 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.

Have you also tried removing the CSS? Transitions in your CSS can really mess up JS animations, is there somethings like  transition: all .3s ...? Also try removing ScrollTrigger and see if the animations fire then, install GSDevTools to debug them further. Try changing out end: () => '+=500vw', for `+=${window.innerWidth * 5}`, but this is all guessing without a minimal demo, if it isn't happening in Codepen, something is interfering in your setup, so sharing just the JS code isn't going to give the whole picture.

 

Hope it helps and happy tweening!  

[Nick.Ls]

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.

[GreenSock]

Yeah, unfortunately we really can't help without a minimal demo to look at. Obviously something else is interfering in your project. Are you using React or something? Are you absolutely positive that your setup code only executes ONCE? Are you maybe not doing proper cleanup or something? Are you using the latest version of the tools? 

[Nick.Ls]

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? 

[Rodrigo]

Hi,

 

Are you lazy loading images or loading custom fonts? You should wait for those resources to be completely loaded before creating your SrollTrigger instances, because any layout shift could cause the calculations made by ScrollTrigger to be off.

 

https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts#doing_operation_after_fonts_are_loaded

 

Happy Tweening!

[Nick.Ls]

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.

[GreenSock]

13 hours ago, Nick.Ls said:

@GreenSockWhat do you mean by proper cleanup? 

I just meant that if you create a ScrollTrigger...and then re-create that same one again without reverting/killing the old one, that could cause an issue. Or if you did multiple .from() calls, like:

 

gsap.from(".target", {x: 100});
gsap.from(".target", {x: 100}); // ran again without reverting the previous one, thus the end value will be incorrect.

 

When you can't seem to reproduce the issue in a minimal demo, it becomes a game of "spot the difference" - try making it more and more like your "real" project until it breaks. 🤷‍♂️

[Nick.Ls]

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!

[Nick.Ls]

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.

[Cassie]

1 hour ago, Nick.Ls said:

Is there a change the scroll containers to break somehow the scrolltrigger position of other elements?

Hi there, I'm not understanding this question I'm afraid. Can you rephrase it for me?

[Nick.Ls]

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?

 

[Cassie]

Ah, ok, I can't really answer that without seeing how you've coded it. But no, it shouldn't. e.g

See the Pen YzEJBQm by GreenSock (@GreenSock) on CodePen

[Cassie]

From all your posts it really sounds like there's something happening after your GSAP code runs to change the height of the page.

 

Quote

Unfortunately I can't replicate the setup or bug in codepen since as I told you before, it always works! 

The fact that it works on codepen and not locally is really an indicator that this isn't a GSAP thing and it's most likely some conflicting third party code, lazy loading images (or even a typo) If you can get us a demo we'll be able to spot it.

[Nick.Ls]

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.

[Nick.Ls]

1 minute ago, Cassie said:

From all your posts it really sounds like there's something happening after your GSAP code runs to change the height of the page.

 

The fact that it works on codepen and not locally is really an indicator that this isn't a GSAP thing and it's most likely some conflicting third party code, lazy loading images (or even a typo) If you can get us a demo we'll be able to spot it.

 

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!

[Shonin]

On 3/21/2024 at 3:01 PM, Cassie said:

Ah, ok, I can't really answer that without seeing how you've coded it. But no, it shouldn't. e.g
 

 

Sorry to hijack the post, Cassie (If you're the same Cassie that made the awesome parallax scroll trigger I saw on codepen then kudos - it's bloody amazing!) 
I'm looking to (give or take a couple of things) trying to make this exact component in Reactjs but really quite struggling tbh.

Your code examples look so small! I'm wondering if you, the scroll oracle, may point me in the direction to find out how I can mimic what you'ce done here, but in react.

[Cassie]

Very likely the same Cassie. Unless there's another Cassie encroaching on my turf.  👀 

 

It would be best not to hijack this post though, could you start another one and link to the demo you're talking about?

 

I'll follow it up there - Thanks so much!

[Nick.Ls]

I am coming back with a codepen that replicates my setup but not the issue unfortunately.

 

See the Pen jORmzLo by Nick_Ls (@Nick_Ls) on CodePen

 

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.

[Cassie]

You have to create ScrollTriggers in the order they appear on the page, if you have multiple forEach loops this might be throwing things off.

Might be helpful to look into refreshPriority and sort?

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort()/

[Nick.Ls]

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.

[Nick.Ls]

@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
...
});

 

 

[Cassie]

Glad we got there in the end!

[Nick.Ls]

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.