Search the Community

Hello! I caved the other day and now I'll be doing a LOT of GSAP 😆 Background: I tried replicating the Fake Scroll (Horizontal) demo and integrating it with SmoothScroller on a Svelte/Sveltekit site. It works on CodePen, and similar it works if I stick the SmoothScroller code inside the Horizontal component. Problem: I rather have the SmoothScroller in layout.svelte, because I'm using it across the *entire* site. If I stick it inside the Horizontal component, other things on the page break. If I have both a global and local component instance, other items on the page jitter (I'm assuming the SmoothScrollers are in conflict over the elements). Most of the other components play nicely going forwards (not in reverse or on resize, but that's another problem 😅). I have attempted to replicate the issue with a minimal demo on StackBlitz. It's not exactly the same, but it is similar, so I'm hoping that perhaps someone shedding either some light on how that should work or best practices will help me solve my initial issue. The issue I'm seeing on StackBlitz is that the full number of sections isn't showing; it is similar on my local site, except that it also disappears VERY quickly and there's a ton of space down the page where the animation should be scrolling. One thing at a time, I guess. Help would be immensely appreciated!

Hi GSAP, We just signed up for Premium because wanted to smooth out the scolling on an animation but when applying SmoothScroller to a multiple animation timeline with pinning, scaling, video mask layer with regular content above and below the animation - but we found SmoothScroller converts the container to fixed position and overlaps the content - we don't want it to do that. Just searched around and found this article (https://medium.com/@terencegrover/smooth-scrolling-with-gsap-overcoming-fixed-positioning-challenges-dbce33b08d49) which describes the same problem, the solution wsa reported to be use a React function useLayoutEffect - we dont use React normally and where not really planning on switching to react for such a small website. Not a regular GSAP user just from time to time we make use of it and usually all good, but not sure if SmoothScroller is going to smooth out the animation on the scrollbar with mousepointer its much smaller moves which is good but mousewheel jump steps is a bit and overdoes it - would SmoothScroller actually fix that? let gridTl = gsap.timeline({ scrollTrigger: { scrub: 1, start: "5% top", end: "15% top", toggleActions: "play none none none", } }) .add("start1") .from(".column-2 .grid-image.top", { duration: 1.5, x: 0, y: '100%' }, "start1") .from(".column-1 .grid-image.middle", { duration: 1.5, xPercent: 100, yPercent: 0 }, "start1") .from(".column-3 .grid-image.middle", { duration: 1.5, xPercent: -100, yPercent: 0 }, "start1") .from(".column-1 .grid-image.bottom", { duration: 1.5, xPercent: 100, yPercent: -100 }, "start1") .from(".column-2 .grid-image.middle", { duration: 2, xPercent: 0, yPercent: -100 }, "start1") .from(".column-2 .grid-image.bottom", { duration: 2.5, xPercent: 0, yPercent: -110 }, "start1"); let gridT2 = gsap.timeline({ scrollTrigger: { trigger: '.grid-section', start: "12% top", pin: true, scrub: true, } }) .to(".grid-section", { duration: 1, scale: 4 }) .to(".column-2 .grid-image.bottom", { display: 'none' }); let gridT3 = gsap.timeline({ scrollTrigger: { trigger: '#videoContainer', start: "46% top", pin: true, scrub: true, } }); Here is a link to the staging server for a work in progress just put this together but if its going to be worth it might spend more time on it -> https://thewanderer.madewithweb.com/ Is there any known workaround for this without using React? Thanks, Paul