[Handling the removal and setting of SplitText with scroll smoother effects]

I have smoother effects applied to the SplitText plugin to create a lag effect for each character in React. But I feel the performance won't be so great on mobile so I want to be able to remove it when it hits a certain breakpoint. Is there a way to remove everything within matchMedia? 

 

React.useEffect(()=> {

let mm = gsap.matchMedia();

if(smoother) {

mm.add("(min-width: 900px)", () => {

 

const split = new SplitText("#discover-copy", { type: "words,chars" });

const chars = split.chars;

 

chars.forEach((char, i) => {

smoother.effects(char, { speed: 1, lag: (i + 1) * 0.002 });

});

 

return () => { // optional

 

};

 

})

}

},[smoother]);

[Can you set a starting scroll position while using ScrollTrigger without running through the pin scrub animation?]

You see when you click bottom with fastScrollend enabled you still see 1,2,3,4 come in sequentially. In my scenario if the user is coming from another page I don't want them to see that, I want it as if the bottom is the start of the page. Maybe the only solution is a page transition that only reveals the content after everything settles.

[Can you set a starting scroll position while using ScrollTrigger without running through the pin scrub animation?]

Thought it was the solution, but even in the example when you click "bottom" you still see some movement even if it is brief. Trying to create a sample but it's difficult. Seems like it's a race condition as sometimes it bypasses the scrub and sometimes it doesn't. 

[Can you set a starting scroll position while using ScrollTrigger without running through the pin scrub animation?]

Essentially I have an intro pin effect for a page that should only start at the beginning in certain scenarios like accessing the homepage directly. On route changes to the homepage I want the user to see the page after the pin effect but still have the option to scroll up. Below is a rough example, and it kind of works insofar when navigating to the page it'll go to scroll pos 2000. But you see a flash of the scrub animation which I don't want.

 

Not sure if this can be achieved.

 

if(fromRouteChange){
 window.scrollTo(0, 2000);
}


tl.current = gsap.timeline({
          scrollTrigger: {
              trigger: ContainerRef,
              id: "hello",
              start: "top top",
              end: "+=2000",
              pin: true,
              scrub: 0.9,
          }
        })

 

[ScrollTrigger - iOS Safari using 100vh pinned element cause overflow and misplacement]

Yes that helps. But also this: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ for anyone wondering. I'll probably need to refresh scrolltrigger after the vh is calculated.

[ScrollTrigger - iOS Safari using 100vh pinned element cause overflow and misplacement]

To get an element 100% height to the mobile browsers bottom ui ( chrome ) usually requires the body/parent element to be 100%. Just wondering if it can be accomplished with scroll smoother as everything is in that large element. Not sure how would go about implementing that. I'll look into it.

[Gsap.matchMedia does not work on mobile devices]

ah my bad. thanks

[ScrollTrigger - iOS Safari using 100vh pinned element cause overflow and misplacement]

Is doing 100% possible if using something like smooth scroller?

[Gsap.matchMedia does not work on mobile devices]

Hi, 

 

Just trying out the new matchMedia functionality in 3.11.0 and while it works ok on a desktop browser, it fails to fire the mobile breakpoint on a mobile device. I am using safari and chrome 104.0.5112.99 on iOS.

 

The codepen should display either "mobile" or " desktop". Of course it'll work if viewing this post on a desktop browser.

 

On the documentation page it recommends the following for mobile. However this fails to do anything. The codepen has the correct viewport metatag.

<meta name="viewport" content="width=device-width, initial-scale=1">

 

See the Pen gOzrbZG by adamatronix (@adamatronix) on CodePen

[Scroll trigger breaks on resize window / timeline]

Thanks! Should have tried that. Didn't think you could add multiple triggers to the same element.

[Scroll trigger breaks on resize window / timeline]

Hi, 

 

So without resizing and scrolling it is working as expected. When you reach the test section it pins, then for a 1000px it'll scrub and the Test will animate to the top, then the whole section just pins for the duration of the page.

However, if you resize after the scrub, the whole thing breaks. The Test labels don't scrub, or it may but they are all in the wrong positions. Definitely the nested triggers causes the issue, but don't know alternative methods to get this effect.

 

 

 

[Scroll trigger breaks on resize window / timeline]

Hi. I put together a codepen here: 

See the Pen OJvqXJy by adamatronix (@adamatronix) on CodePen

 

Similar situation where you can resize before the pin but not after.

I think it's because I got nested pins. Perhaps you guys can recommend a more elegant solution where I can have it sticky and scrub for a certain duration.

[Scroll trigger breaks on resize window / timeline]

Similar issue for me on a pinned section. Was that fix every deployed?

"gsap": "npm:@gsap/shockingly@^3.10.4",
 

[ScrollTrigger + React: trouble when pinnings multiple elements on the same page]

Seems I have this issue when using ScrollSmoother. Without it my scroll triggers work fine. Refreshing hasnt worked, only adding them using set timeout. Il try and create a demo.

[ScrollSmoother + Gatsby — First click instantly scrolls to top of page]

I'm also having the same issue with Gatsby. Seems Damian's solution works, but dont know what the ramifications are of doing it this way.

Was the fix ever deployed?