Andy777 Posted February 9, 2023 Share Posted February 9, 2023 Hi, as i title explain i would like to add scroll smooth when scrolling, how can i do it? See the Pen yLqdLRz by Andy199807 (@Andy199807) on CodePen Link to comment Share on other sites More sharing options...
rubenmeines Posted February 9, 2023 Share Posted February 9, 2023 Hi Andy, If you want to use scrollsmoother you need to register it because it is a separate plugin. Then you need to add 2 divs to your html and tell in javascript that you are using those as the scrolling element. Please check: "https://greensock.com/docs/v3/Plugins/ScrollSmoother". This is the HTML <body> <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> <!-- position: fixed elements can go outside ---> </body> And this is the JavaScript: import { gsap } from "gsap"; import { ScrollSmoother } from 'gsap/all'; gsap.registerPlugin(ScrollSmoother); let smoother = ScrollSmoother.create({ wrapper: '#smooth-wrapper', content: '#smooth-content', smooth: 2, }); Is that what you meant? In codepen you can ignore the import and the registerplugin if you have used the traditional starterpack from greenSock: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted February 9, 2023 Solution Share Posted February 9, 2023 Hi, Yep, @rubenmeines is right, that's all it takes. Here is a fork of your codepen: See the Pen VwBJPYB by GreenSock (@GreenSock) on CodePen Just a side note ScrollSmoother looks by default for elements with the ids #smooth-wrapper and #smooth-content so when you have this in your HTML: <div id="smooth-wrapper"> <div id="smooth-content"> <!--- ALL YOUR CONTENT HERE ---> </div> </div> There is no need to tell ScrollSmoother about the wrapper and the content, it can be this: ScrollSmoother.create({ smooth: 1, effects: true, }); Hopefully this clear things up. Let us know if you have more questions. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
Andy777 Posted February 9, 2023 Author Share Posted February 9, 2023 Thanks @Rodrigo and @rubenmeines was helpful. 2 Link to comment Share on other sites More sharing options...
Andy777 Posted February 13, 2023 Author Share Posted February 13, 2023 I have another problem when i visualise the site on mobile devices, i think the problem is in set the height of each sections, but i am not sure. If someone could help me i will really appreciate. I suggest to find the issue to see the site on mobile screen of "inspect element". You will see that the height of the body is too hight respect of the entire size of the sections. Here the codepen: See the Pen WNgegOG by Andy199807 (@Andy199807) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted February 13, 2023 Share Posted February 13, 2023 Hi, One issue I can definitely see in small screens is that the first ScrollTrigger animation is creating some layout shifts on the page. Also your codepen doesn't have the viewport meta tag, which makes it look even weirder. Also your initial 3D animation should be inside a container with overflow hidden, since it is also creating some extra vertical scrolling and (I presume) unwanted horizontal scrolling. This is more related with CSS than GSAP actually and is a bit beyond the scope of the help we can provide in this free forums. If another user has the time to experiment with your codepen and offer assistance about this. The one advice I can give you is to start with mobile first with the HTML and CSS and then create your animations for mobile. GSAP has MatchMedia which is super convenient for creating different animations for different screen sizes. If you want to use the same animation for every screen size, that could be more challenging but achieved nonetheless: https://greensock.com/docs/v3/GSAP/gsap.matchMedia() Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now