TiSai Posted February 10, 2021 Share Posted February 10, 2021 Hey guys, can somebody help me with usage of gsap and react-custom-scrollbars? I would be grateful you give an example. Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 10, 2021 Share Posted February 10, 2021 Hey TiSai and welcome to the GreenSock forums. I've never used react-custom-scrollbars before and I'm not sure if any regulars here have. What sort of animation are you wanting to create with GSAP and your custom scrollbar? You're much more likely to get helpful responses if you post a minimal demo of your situation along with an explanation of what you're hoping to accomplish and what's going wrong. Link to comment Share on other sites More sharing options...
TiSai Posted February 10, 2021 Author Share Posted February 10, 2021 Thanks for help! I've decided to refuse to use react-custom-scrollbars. (Actually, I can't create demo😅) In brief, I've created a ref for Scrollbars component and passed it into gsap.to function with scrollTo parametr. But it didn't work. I have another question: shall I create different timelines for different animation? For example, I have an instance of TimelineLite and want to add in different function various animations const menuTl = new TimelineLite({defaults: {duration: 0.3, ease: "none"}}); const menuAnim = () => { if (openMenu) { menuTl .to(spanSecondRef.current, {transformOrigin: "100% 50%", x: "115%"}) .to(spanFirstRef.current, { backgroundColor: "#fff", transformOrigin: "100% 0", x: -9, y: -8, rotate: -45 }, 0.3) .to(spanThirdRef.current, { backgroundColor: "#fff", transformOrigin: "100% 100%", x: -9, y: 8, rotate: 45 }, 0.3) .to(borderWrapperRef.current, {borderColor: "#fff"}, 0.3) .to(navigationRef.current, {duration: 0.6, left: 0}, 0); } } const scrollToAnim = (e) => { e.preventDefault(); if (openMenu) { menuTl .to(spanSecondRef.current, {transformOrigin: "100% 50%", x: 0}, 0.3) .to(spanFirstRef.current, { backgroundColor: "#D09A4E", transformOrigin: "100% 0", x: 0, y: 0, rotate: 0 }, 0) .to(spanThirdRef.current, { backgroundColor: "#D09A4E", transformOrigin: "100% 100%", x: 0, y: 0, rotate: 0 }, 0) .to(borderWrapperRef.current, {borderColor: "transparent"}, 0) .to(navigationRef.current, {duration: 0.6, left: "-100%"}, 0) .call(() => setOpenMenu(!openMenu)) .to(window, {duration: 0.7, scrollTo: `${e.target.hash}`}); } else if (!openMenu){ menuTl.to(window, {duration: 0.7, scrollTo: `${e.target.hash}`}); } } I add this animation to elements with onClick and sometimes different animations don't sabotage the first time Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 10, 2021 Share Posted February 10, 2021 In general you don't want to keep adding to the same timeline like that. You should usually either use control methods on animations created beforehand (usually this is preferable) or create new timelines if you need to, making sure to overwrite old tweens. You might learn a lot from my article about animating efficiently. As for ScrollTo not working, I'm guessing that the ScrollToPlugin is updating the scroll position of the page but your custom scrollbar is not working? If not, please explain. In any way, please create a minimal demo using something like CodePen or CodeSandbox if you'd like debugging help. Side notes: You're using some of the old syntax. We highly recommend using all new syntax. It's easy to upgrade! You should avoid animating properties like top and left. Instead animate x and y as they're more performant. 2 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