greenchonies

Instead of using onComplete as an option inside the timeline, I added a .eventCallback like this: https://stackblitz.com/edit/react-gf8jgn?file=src%2FAnimationWrapper.js

Looks like registering the plugins outside of useGSAP did the trick, thank you! I remember I moved the plugin registration into the useGSAP because I was getting the warning Extra attributes from the server: styleAnd found this thread, which suggested to register inside a useEffect: I also hadn't considered to register useGSAP as a plugin as well. Here is the updated demo with your suggestions: https://stackblitz.com/edit/react-egkdv7?file=src%2FAnimationWrapper.js Putting the onComplete inside the parent timeline is indeed cleaner, but the only issue is I'm using typescript and the onComplete event and contextSafe function now give me the following errors: onComplete: Type '() => gsap.core.Timeline' is not assignable to type 'Callback'. Type 'Timeline' is not assignable to type 'void'. contextSafe: Cannot invoke an object which is possibly 'undefined'. Here is my typescript setup: https://stackblitz.com/edit/react-jjrktj?file=src%2FAnimationWrapper.tsx (I don't get the same errors in stackblitz) When I use my previous eventCallback method, I get no errors. But it looks like callbacks in useGSAP are context safe anyway, so is there no need for me to use contextSafe? Forgive my ignorance, just tring to understand this more. Demo: https://stackblitz.com/edit/react-oxxh2h?file=src%2FAnimationWrapper.js

I would love some some insight into how I could go about this in a better way. The reason I have an intro animation that calls a scroll animation on complete is because the intro animation is a page loading animation. When I land on the page, I need to see the intro animation, and only after the intro is finished should I be able to scroll to scrub the rest of the page animations. Another reason I had to do it this way is that the elements in the page loading animation need to be animated out of the view once the scrolling begins. Here is a minimal example: https://stackblitz.com/edit/react-gf8jgn?file=src%2FApp.js I am adding child timelines to a main timeline to keep my code organized. The masterScroll animation is very long and so I moved it to it's own file along with the intro animation. I am wrapping my page with an AnimationWrapper component because I need to fetch some data on the main page, and I can't do that in a client component in nextjs. As you can see, the scrubbing works, but the numerical scrub amount has no effect, and snapping does not work.

I discovered what was causing numerical scrub not to work. It turns out that even though I was registering the scrolltrigger plugin in the parent timeline, I needed to import and register scrolltrigger in the child timeline as well. Weird because scrub was working without doing this, but numerical scrub didn't work until I did this. The only side effect is that now I get this warning in the console from nextjs: Warning: Extra attributes from the server: style at body at html I decided not to use Lenis because it was conflicting with scroll snapping. I needed the timeline to snap to labels. Luckily my entire page is a gsap animation inside of a pinned container soscrub: 1 is enough to give the effect of a smooth scroll without the need for scrollsmoother.

I was not using ScrollSmoother. All of the animations were within absolutely positioned sections within the viewport, so using 'scrub: 1' would be enough to give the effect of a smooth scroll. I know this works because I got it to work in an Astro project. But when I ported the project to NextJS, the numerical scrub just behaved like 'scroll: true'. So my quick fix was to install Lenis as that made the scroll animations smooth with the added benefit of making any page scroll smooth even without gsap involved. If I have some extra time I’ll make a minimal demo, and maybe that will help me find the issue. But for now Lenis is doing the trick.

I opted to use Lenis instead. That way I can have smooth scrolling on pages without animations as well. I may return to this issue later to see why numerical scrub isn't working, but in the meantime, Lenis is doing the job.

I am using gsap scrolltrigger in a nextjs app. I have set up the scroll animation and everything is working except the numerical scrub value has no effect. No matter what number I put in, it acts as if it was just scrub: true. Here is how I've set it up. In my main page: import { useRef } from 'react' import { gsap } from 'gsap' import { useGSAP } from '@gsap/react' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { ScrollToPlugin } from 'gsap/ScrollToPlugin' import { introAnimation, masterScroll } from '@/animations' const scope = useRef<HTMLElement>(null) const tl = useRef<gsap.core.Timeline>() useGSAP( () => { gsap.registerPlugin(ScrollTrigger, ScrollToPlugin) tl.current = gsap .timeline() .add(introAnimation()) .eventCallback('onComplete', () => { masterScroll(scope) }) }, { scope: scope } ) return ( <main ref={scope}> ... </main> ) Then in animations.ts: import { gsap } from 'gsap' import { RefObject } from 'react' export const masterScroll = (trigger: RefObject<HTMLElement>) => { const tl = gsap.timeline({ scrollTrigger: { trigger: trigger.current, start: 'top top', end: '+=900%', scrub: 1, pin: true, }, }) // tl. animations return tl } The scroll animations are working, but the scrub value has no effect. There is no smoothing whatsoever. What am I missing?

Hi @Rodrigo, thank you for taking the time to explain this! I was hoping there would be some solution as I thought this would be a common necessity, to have pauses in a scrub timeline as you scroll, but to ignore those pauses when using scrollTo clicks. I even tried creating a new variable that holds the delay value, then setting the variable to 0 when the buttons are clicked and resetting it back to the default value after the scroll animation is complete. Like this: let defaultDelay = 1; // default delay btnPhase1.forEach((btn) => { btn.addEventListener('click', () => { defaultDelay = 0; // set delay to 0 gsap.to(window, { scrollTo: tl.scrollTrigger.labelToScroll('phase1Start'), onComplete: () => { defaultDelay = 1; // reset delay back to default after scroll } }) }) }) tl.to('#phase-1', { opacity: 0, xPercent: -65, delay: delay }) But that didn't work either. CodePen here. Not sure what I'm wrong. Anyway, it was worth a shot. Hoping that GSAP will consider adding a feature that will make this possible in the future

I have a timeline that is being controlled by a scrollTrigger scrub. There are delays on some of the tweens so that there are pauses as I scrub. I have some labels on some of the tweens that I want to access via some buttons on the page so I can click to scrollTo that position in the timeline. I have gotten this far, except I want to ignore the delays when using the scrollTo click. How can I set the delay to 0 only when using scrollTo? Example Codepen attached. Sidenote, the scrollTo clicks ignore the delay when going backwards in the timeline. Yet the delays are present when scrolling backwards normally. Why is that?