Search the Community

Hi Team Greensock Forums, Great to be back on these forums. Always someone willing to take time out of their day to help you with something you've been banging your head against a wall about for hours haha. I've been having some issues with a fixed element using SmoothScroller and ScrollTrigger. The element itself is an Apply button that is always fixed to the bottom right of the screen. I've put it outside of the main smoothScroller content wrapper to ensure it stays fixed all of the time and is relative to the body. What I'm trying to achieve is the following: Apply button fixed and outside of the main scrollSmoother When the user is, let's say, 150px from the bottom of the scrollable viewport, I want to get it to change to absolute positioning and then it locks to that position and is no longer fixed When the user scrolls back up, it changes back to position fixed and continues to stay fixed as the user scrolls up. Please find a link to a little CodePen I created for anyone who wants to have a crack (https://codepen.io/dayneh88/pen/jOgBmXj) Any help would be greatly appreciated. Thanks again, Dayne

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