WEB1995

Hi All, It's ok I figured out what the problem was, when using SmoothScroller need to make sure the smooth-wrapper is around all content not just the animation! https://codepen.io/psthomson75/pen/dyLpKwK (smooth-wrapper around animation only - all the content overlaps) https://codepen.io/psthomson75/pen/XWQpJmB (smooth-wrapper around all content -now the content keeps the same layout + has smooth scroll 😎) Instead of trying to describe again just forked the codepen with a fixed version. Cheers, Paul

Hey thanks for answering Rodrigo made a quick code pen to illustrate the problem trying to find a solutions for Before turning on the SmoothScroller plugin on the demo site the animation with ScrollTriggers with in the correct place with content abiove and below but as soon as turning on SmoothScroller it converts the animation to fixed position all the content above and below is no longer above and below. as described in the article https://medium.com/@terencegrover/smooth-scrolling-with-gsap-overcoming-fixed-positioning-challenges-dbce33b08d49 Jack thanks for replying - can see this example that I took from the demo gallery and stripped out to has the data-speed attributes but it still makes the animation overlap content abive and below due to fixed positioning - could use paddings and margins but trying to avoid that - is it unavoidable to have fixed positioning? https://codepen.io/psthomson75/pen/dyLpKwK BTW I turned off SmoothScroller on the staging site (as other people where looking at it) but the moment turned it on the animation jumps to the top of the page and any pinned objects get overlapped Have added a version with the SmoothScroller on the staging site so you can see the problem... https://thewanderer.madewithweb.com/ (Without SmoothScroller) https://thewanderer.madewithweb.com/smoothscroller/ (With SmoothScroller) Hope that is clearer, thanks! Paul

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