Jump to content
Search Community

GSAP with react-custom-scrollbars

TiSai test
Moderator Tag

Recommended Posts

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

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

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.
  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...