adamatronix

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

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.

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.

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

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.

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.

ah my bad. thanks

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

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

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

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. Screen Recording 2022-08-23 at 10.05.34 AM.mov

Hi. I put together a codepen here: https://codepen.io/adamatronix/pen/OJvqXJy 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.

Similar issue for me on a pinned section. Was that fix every deployed? "gsap": "npm:@gsap/shockingly@^3.10.4",

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.

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?