Search the Community

In short, I've employed ScrollSmoother and ScrollTrigger in my NextJS portfolio, but when I have Chrome/Edge devtools open and my app is refreshed (like when I've made a change in dev), the smooth scrolling stops. This wouldn't be the biggest deal if all that changed was the "lag" applied in scrolling, but other features that accompany SmoothScroller, like parallax and ScrollTrigger, begin to break down. Resizing the window given these conditions results in strange placement of any ScrollTriggers' markers. Moreover, I recently noticed that switching display orientation on mobile results in the same problem (just as is, not even in DevTools), if this helps diagnose my problem. It was one thing for it to affect my experience as a dev, but another now that I see the final product impacted, so any pointers would be greatly appreciated! The CodeSandbox demo I have linked below is a barebones React Project with the same component "SmoothScrollOverlay.tsx" that I use in my actual project. It's set up like this in my actual project because as mentioned, I'm using NextJS, so I separate GSAP from the page for SSR purposes. Do let me know if I'm abusing any bad practices in doing such. For context, I'm a student and new Software Engineer still building on my knowledge of React, let alone GSAP now, so if I've missed obvious things in the docs/forums, I apologize. It's been hard to combine my knowledge in both as I've struggled to find many resources that fit my goals, so if someone could push me in the right direction or link projects I could look at, I would greatly appreciate it! Thank you! https://codesandbox.io/p/sandbox/hjdqmr (code) https://hjdqmr.csb.app/ (replicate bug here. If needed, I can link a video of the bug as well)

Hey guys, I'm creating a banner, which will play 3 times (loop 2), and use GSDevlTools. The bannerflow is like this: Intro, Scene 1, Scene 2, Scene 3, Outro Scene 1, Scene 2, Scene 3, Outro Scene 1, Scene 2, Scene 3 So after the first loop Intro should be removed, and the last loop should not play the Outro. My issue here is, that i cannot figure out a way to write the code, so it also works with GSDevTools. - the final timeline is not showing the correct length. I've tried with var master_timeline = new TimelineMax(); master_timeline .add(intro()) .add(scene1()) .add(scene2()) .add(scene3()) .add(outro()) .add(scene1()) .add(scene2()) .add(scene3()) .add(outro()) .add(scene1()) .add(scene2()) .add(scene3()) ; But that makes it very messy writing the scenes.. - i cannot use .from at all because, the it conflict with the scenes later on. Then i've tried with var master_timeline = new TimelineMax({repeat:2, onRepeat:check_replay}); master_timeline .add(intro(), "intro") .add(scene1(), "+=0.5") .add(scene2(), "+=0.5") .add(scene3(), "+=0.5") .add(outro(), "outro+=0.5") ; function repeat(){ master_timeline.remove("intro"); } Which does not remove the intro. Then i've tried var master_timeline = new TimelineMax({onComplete:repeat}); var loops = 0; var max_loops = 3; master_timeline .add(intro(), "intro") .add(scene1(), "+=0.5") .add(scene2(), "+=0.5") .add(scene3(), "+=0.5") .add(outro(), "outro+=0.5") ; function repeat(){ loops++; if(loops == 1){ master_timeline.remove("intro"); } else if(loops >= max_loops){ master_timeline.remove("outro"); } master_timeline.restart(); } Which it does not remove any of the labeled scenes, and the GSDevTools timeline, does not show the correct maxtime. I'm really out of solutions, so i would be very happy if any of you guys have a solution, or just a hint which can lead me in the correct way. Best regards Christian