Search the Community

Hello my Wonderful Community, I have created some pages with GSAP scroll trigger animations, but now I want to add smooth scrolling, whatever packages I found are creating fake scroll due to which my scroll trigger animations are not triggered. Is there any package or solution to solve it?

So hi, im trying to get used to the new hook useGSAP and gsap.context from GSAP, so since i started with useEffect and useLayoutEffect, i allways had the same issue that the horizontal scrooll section has a conflict whit smootscroll, all other animations are working as spected. So here is my app component: import { useGSAP } from '@gsap/react'; import gsap from 'gsap-trial'; import ScrollSmoother from 'gsap-trial/ScrollSmoother'; import ScrollTrigger from 'gsap-trial/ScrollTrigger'; import { useRef } from 'react'; import BrandsSection from './BrandsSection'; import CodeSection from './CodeSection'; import ContactSection from './ContactSection'; import IntroSection from './IntroSection'; import Navbar from './Navbar'; import PresentationSection from './PresentationSection'; import ProjectSection from './ProjectSection'; import SkillSection from './SkillSection'; import { StyleProvider } from './context/NeumorphicStylesContext'; export const PortfolioApp = () => { const componente = useRef(); gsap.registerPlugin(ScrollTrigger, ScrollSmoother); useGSAP(() => { const ctx2 = gsap.context(() => { const smoother = ScrollSmoother.create({ smooth: 2, effects: true, normalizeScroll: true, }); ScrollTrigger.create({ trigger: ".box-c", pin: true, start: "10% center", end: "+=1750", markers: true }); ScrollTrigger.create({ trigger: ".box-b", pin: true, start: "45% center", end: "+=1750", markers: true }); }, componente); return () => ctx2.revert(); }, { scope: componente }); return ( <StyleProvider> <Navbar /> <div id="smooth-wrapper" ref={componente}> <div id="smooth-content" > <IntroSection /> <PresentationSection /> <ProjectSection /> <SkillSection /> <BrandsSection /> <CodeSection /> <ContactSection /> </div> </div> </StyleProvider> ); }; and here is the horizontal section wich fastly goes to other sectios like it doesnt wanted to reproduce the animation, and it works when smootscrolling is not active: import { useGSAP } from '@gsap/react'; import gsap from 'gsap-trial'; import { useRef } from 'react'; import { CarrouselProjects } from './CarrouselProjects'; import { DescriptionProject } from './DescriptionProject'; import style from './projects.module.scss'; const ProyectSection = () => { const container = useRef(); useGSAP(() => { const slider = document.querySelector(".container") const ctx = gsap.context(() => { const panels = gsap.utils.toArray(".panel"); gsap.to(panels, { xPercent: -100 * (panels.length - 1), ease: "none", scrollTrigger: { markers: true, trigger: ".container", pin: true, scrub: 1, snap: 1 / (panels.length - 1), end: () => "+=" + slider.offsetWidth } }); }, container); return () => ctx.revert(); }, { scope: container }); return ( <div ref={container}> <div className="container"> <div className="description panel"> <div className={style.Projects_projectsContainer}> <CarrouselProjects /> <DescriptionProject /> </div> </div> <div className="panel red"> <div className={style.Projects_projectsContainer}> <CarrouselProjects /> <DescriptionProject /> </div> </div> <div className="panel orange"> <div className={style.Projects_projectsContainer}> <CarrouselProjects /> <DescriptionProject /> </div> </div> <div className="panel purple"> <div className={style.Projects_projectsContainer}> <CarrouselProjects /> <DescriptionProject /> </div> </div> </div> </div> ); }; export default ProyectSection; i would really aprecietted your help and i will try to replacate the issue on codesandbox if this information its not enough

Happy to share this with you and hear from experts and fellow enthusiasts in the field. Visit Website

Hi all., Great day. When we're using the smooth scroll script the functionality is not working fine as we expected. As per your demo in codepen (https://codepen.io/GreenSock/pen/KKXZOyZ), we tried to include the height with a static value like (height: 9000px;) reference - https://prnt.sc/6K97ufrgm4CE . Shortvideos reference, https://recordit.co/hdjCQztnJM and https://recordit.co/3At0AA5qWD Unfortunately, we can't include the constant value here, the height will differ for each page. So, we tried to get the entire body height from the script. We haven't got any luck on this. Now, we are facing the height calculation methods only. So, anyone please help us to complete this without calculating the height? Thanks in advance

Hello, I was building entire multi page website with using GSAP only in Next.js for scroll trigger on every page for some elements. At, last I decided to also add locomotive scroll as well. But after adding it to the project all scroll trigger doesn't work at any page. Why is that I cannot find the answer. Also is there any method to achieve smooth scroll without disabling scroll trigger. Thank You !

Hi all, I just wondered the best practices when using Scrolltrigger and any smooth scroll library? I appreciate you guys want isolated code examples but due to the nature of this problem being sitewide I can't really do that. I'd really appreciate a bit of insight on how to make scrolling interactions less laggy in general. All I'm really doing is using a bunch of scroll triggers, nothing complicated and under 250 lines of code so really it should not be lagging. I don't need someone to fully audit the code or anything, rather I'd appreciate if someone could just have a quick look in the inspector and see if there's anything standing out that's causing my issues. I've come up with a few things that could be causing the problem. - Image size - RAF triggering too much - Not using dynamic scroll triggers with "for each" etc Here's my site i'm using scrolltrigger x asscroll - https://scrollablegsapdemo.webflow.io/

hello everyone i tried to make smooth scroll with https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy() but nothing works. anyone can help me? same as in ssk.com

Hello guys. Please help me with some strange behavior. I have parent component (React) where i initialize ScrollTrigger.scrollerProxy with Locomotive Scroll as you recommended in docs (scrollerProxy). If i try to use scrollTrigger inside that parent component (using useEffect) - everything works fine. But if i use scrollTrigger inside child component and provide the same scroller element (with id #smooth-scroll) then i have an issue. I've already tried: to call ScrollTrigger.refresh() inside child component; make reference (useRef) to locomotive instance in parent component and pass it to child via props; make reference to scroller element using useRef inside parent and pass it to child via props; to initialize ScrollTrigger.scrollerProxy with Locomotive Scroll inside child component - this works, but if i have bunch of elements which calling this initialization - i have terrible performance issue. So i think the best way is to provide only one initialization inside parent (i.e. page) and pass it somehow to child components. Link to Codesandbox (to see smooth scrolling click "Open in new window" icon at top right in browser panel). Maybe someone else have the same problem? What i do wrong in this case?

Hi guys! I'm trying to reproduce the smooth scroll on drag, this is an example. Do you guys have any idea how can I make it? https://www.designembraced.com

Hello ? First time poster here. I'm trying to mimic the scrolling behavior of this site, where the text's vertical position lags behind the scroll position. The effect is most obvious in the navigation menu (click the hamburger icon in the top left). You'll notice that if you scroll down quickly to the bottom of the page, it takes about two seconds for the text to catch up to the scroll position. This looks like something I could use ScrollTrigger for. In the the docs page video at about 9:50, you can see that the orange box lags the .ghost box by one second when it has the setting scrub: 1. This is the behavior I want, except it should animate the text's vertical position on the screen. The problem is that, unlike with the horizontal position, the vertical position of the element in the DOM doesn't change -- only the scroll position changes. Any ideas how I can achieve this effect?

Hey guys, I wonder if you could give me some advice again I am using the Locomotive smooth scroll script (https://locomotivemtl.github.io/locomotive-scroll/), which gives my projects a beautiful buttery scroll effect but I need some help with playing GSAP animations along with this when the target element comes into view. You'll see in the Pen that when each block comes into view it has a class added "is-inview". It would be great if I could just have an animation play as soon as that class is added, and then reverse when that class is removed. Maybe something to keep looking for changes on the elements? Any ideas? Huge thanks as always! Andy

Hi, I'm trying to get smooth scrolling to work properly, but unfortunately I can't handle it myself (sorry, I'm pretty new of this). I'm using a scrollToPlugin and external plugin called "Smooth Scrollbar". If you look at it you will see that it is not working properly. Clicking on the link will move it chaotically. Also, if you click on the link multiple times, the page will move up and down, though it shouldn't. Hopefully someone can help me with this. Thank you.

Hello, i'm using gsap with scroll magic to animate on my project i tried to implamente smoothscroll, like this exemple, it's working right ecxept for pinned section. Any help plz ?

Hi, I have recently started learning animation on the scroll, but I have a problem that I cannot solve. I made a very simple block layout. Using the well-written SmoothScroll class by Blake Bowen https://codepen.io/osublake/pen/vvRWQd I would like to expand it a bit to be able to scroll horizontally. I would like it to work like this: scrolls down the page normally until block number 5, when block number 5 touches the top of the screen it blocks and scrolls to the right until block number 7 and then again scroll down from block 8 to the end of the page. Back, it looks the same only in reverse order. However, I was able to do something like this on a normal scroll and not on a transform. I am asking for help with this. Thanks Sorry for my English :[

hi i want create a parallax layer and smooth scroll effect on my theme like http://www.combidome.com/#/convenience . i don not know that how can create parallax layer effect with gsap and scroll magic?? Someone can help me ?? thanks ...

I've been getting a bunch of people asking me about how to do a smooth page scroll effect, so here it is. Scrolling is just a transform. If you scroll 100px down, the browser will translate the page -100px up. We can do that with GSAP. TweenLite.set(contentToScroll, { y: -window.pageYOffset }); So how do you prevent the browser from scrolling the content? Position your content in a fixed container, and set the height of the body equal to the height of your content. This will allow the page to scroll, but the fixed container won't move. Now animate the y position of your content based on the scroll position of the page.

Hi Is it possible with GSAP to create a smooth scroll type animation for mouse-wheel functions? The scroll judder on Chrome on a Mac is awful (chrome have removed the ability to smooth scroll on Mac OS for good apparently) and I've seen this site where the scroll is absolutely buttery smooth with a mouse well on mac for chrome when using a third party mouse (i.e. not an apple trackpad or magic mouse). http://www.goodkids.studio/ I'm not concerned about certain animations being triggered by scroll events because I know there are libraries out there that do that. It's more the smooth scroll itself. Because GSAP is so buttery smooth I'm wondering if it is possible with GSAP? Any ideas as to how they've done this would be amazing. Emily.

Guys, I'm using some specific technique to build something like that is in codepen pattern. But the thing is that its not working, when the height of body is max 100vh. Is there any way to avoid this issue using this awesome script?

I have onepage site and I use gsap for all animations there, incl. smooth scroll with anchor links, something like this http://codepen.io/anon/pen/bxaHz Now I want combine this smooth scroll functionality with history.js plugin https://github.com/browserstate/history.js/ , so that users had the opportunity to go back and forward through the site. But I failed to do that. Here is what I have atm http://codepen.io/anon/pen/jzymf as you can see page jumps to the top when you click back or forward, and only then scrolls. I would really appreciate any help. Thank you very much!

Helly everybody, I was hoping someone out there might be able to provide some info on applying the greensock throwprops plugin to a vertical scrolling nav menu for an android app. I have tried modifying the code from the throwprops page, but it uses a textfield, i want buttons inside a movie clip... Is that even possible? Can anybody point out any useful tuts or articles? or would someone like to view the file? Thanks a bunch everybody, Alex