[Using ScrollTriggers in Next.js with useGSAP()]

Thanks for the real human reply @mvaneijgen 
My question is more about the principles of working with GSAP and React, not about debugging my part of code to make it work - because it basically works. My sample is really simple...
I just wonder If I should kill all the ScrollTriggers somehow? Or useGSAP handles it all? 

 

[Using ScrollTriggers in Next.js with useGSAP()]

AI everywhere, blah... 

Is assigning ScrollTrigger to ref a right approach? 

 

let triggerRef = useRef<ScrollTrigger>();

(...)

triggerRef.current = ScrollTrigger.create({
	trigger: container.current,
    start: 'top top',
	end: `bottom bottom-=${offset}`,
    pin: intro.current,
});

(...)

if (triggerRef.current) {
	triggerRef.current.kill();
}

 

[Using ScrollTriggers in Next.js with useGSAP()]

The demo can be seen here: https://bethebuzz.vercel.app/careers It's the second section after hero, with the Values box pinned on Scroll. It works, but I know that code is wrong. I just don't understand how to use it properly. 

[Using ScrollTriggers in Next.js with useGSAP()]

Hello!
I think I got trouble understanding how should I use GSAP in my Next.js project, in particular, ScrollTriggers, how to initialize and kill them on resize and pathname change. 

Let me share you my component (it's a Prismic slice in case you wonder about the syntax). I removed some parts which are irrelevant. 

The aim of this code is to pin the smaller "intro" div, until we scroll through the whole container. Then it sticks to the bottom of it. 
This code actually works, but I've got a couple problems with it. 

1. Resizing works really slow. It feels like a lot of stuff is happening in the background and it feels wrong. But it still kinda works.
2. Second issue is major and it's blocking me from going further. The line that kills ScrollTriggers applies to all the ScrollTriggers across the projects, including those from other components!

How should I set it up properly? I will appreciate any advice!
 

'use client';

import { useRef } from 'react';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import { useGSAP } from '@gsap/react';


const Values = ({ slice }: ValuesProps): JSX.Element => {
  const container = useRef<HTMLDivElement>(null);
  const intro = useRef<HTMLDivElement>(null);

  const setupSTs = (offset: number) => {
	// I don't need a pin on mobile screens <= 768
    if (window.innerWidth > 768) {
      ScrollTrigger.create({
        trigger: container.current,
        start: 'top top',
        end: `bottom bottom-=${offset}`,
        pin: intro.current,
      });
    }
  };

  const initSTs = () => {
	// This line breaks my other components, but if I disable it, resizing for this component doesn't work anymore
    ScrollTrigger.getAll().forEach((ST) => ST.kill());

    if (intro.current) {
      let introHeight = intro.current.clientHeight;
      let offset = window.innerHeight - introHeight;
      setupSTs(offset);
    }
  };

  // Is it a correct use of useGSAP?
  useGSAP(
    () => {
      gsap.registerPlugin(ScrollTrigger);
      initSTs();
      ScrollTrigger.addEventListener('refreshInit', initSTs);
    },
    { scope: container }
  );

  return (
    <section
      ref={container}
    >
      <div className={styles.values__wrapper}>
        <div ref={intro} className={styles.values__intro}>
         (...)
        </div>

        <div className={styles.values__container}>
          (...)
        </div>
      </div>
    </section>
  );
};

export default Values;

 

[ScrollSmoother in Next.js breaks ScrollTrigger upon page navigation from ScrollSmoother page to non ScrollSmoother page]

Thank you @Rodrigo, this link works.
I wonder, isn't it bad idea to make the whole app client side with 'use client' in layout.tsx?

[ScrollSmoother in Next.js breaks ScrollTrigger upon page navigation from ScrollSmoother page to non ScrollSmoother page]

On 2/15/2023 at 5:36 PM, Rodrigo said:

Here is an example using the App folder with ScrollSmoother:

https://stackblitz.com/edit/nextjs-ysf649?file=app%2Fpage.js,app%2Fimages%2Fpage.js

@Rodrigo , this link is broken now. Can we get a working example of ScrollSmoother in Next App Directory with multiple pages? Maybe using useGSAP() hook?  I have no idea how to tackle that correctly...

[ScrollSmoother scrolls to top on any anchor links click.]

I've found the reason, I was using function below to scrollTop on page refresh... what's the better approach for this? [I do not want history to store scroll position on refresh ].
 

window.onbeforeunload = function () {

window.scrollTo(0, 0);

};

[ScrollSmoother scrolls to top on any anchor links click.]

Hello, 

 

I've got a very frustrating issue with the site I am developing: https://curatr.kodohouse.site/

Any link that has a href attribute  (for example phone numbers and emails) in the header and the intro, causes a ScrollSmoother to jump to the top of the page. They have no events attached to them. The only way to prevent this is using e.preventDefault(), but obviously I can't to that. Why this is happening?

I will appreciate any help. Thanks.
 

[ScrollSmoother + barba.js (update on AJAX call)]

Thank you! Killing the instance and reinitializing the ScrollSmoother did the job.

I just wonder, don't you handle history events in a different manner? So users are able to get back to the previous page with the same scroll position, by using history back button and won't start with scrollTop position. I tried below, but for some reason, the scroll position is a little bit different than expected. 

 

if (typeof data.trigger == 'object') {
	Site.smoother.scrollTop(0);
	Site.smoother.kill();
}

typeof data.trigger returns object, if the trigger was DOM element, and string, if it was history event.

[ScrollSmoother + barba.js (update on AJAX call)]

Hello,

 

I can't make ScrollSmoother work with AJAX transitions using barba.js library. The problem is, that the ScrollSmoother isn't updating properly. It's not updating the content height, and the effects on new page won't apply. How should I approach it? Below are the basic functions I use, and the structure. I used it exactly the same with Locomotive Scroll, before I tried to move to GSAP solution. 
ScrollTrigger.refresh(); doesn't seem to do anything. 
I will appreciate your help. Thanks.

 

<div id="site" data-barba="wrapper">
  <div id="smooth-wrapper">
      <div id="smooth-content">
        <main data-barba="container">
          <?php the_content(); ?>
        </main>
    </div>
  </div>
</div>
      

 

initScroll: () => {
  Site.smoother = ScrollSmoother.create({
    wrapper: '#smooth-wrapper',
    content: '#smooth-content',
    smooth: 1.5,
    effects: true,
    smoothTouch: 0.1,
});
},
initTransitions: () => {
	barba.init({
		transitions: [
			{
			name: 'default-transition',
				leave(data) {
			},
			enter() {
			},
			}
			],
		});

	barba.hooks.beforeLeave((data) => {
	});

	barba.hooks.after((data) => {
		Site.reinit();
		ScrollSmoother.scrollTop(0);
		ScrollTrigger.refresh();
	});
},