TiSai

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

Hey guys, can somebody help me with usage of gsap and react-custom-scrollbars? I would be grateful you give an example.