Jump to content
GreenSock

Akash Ranjan

Use self.progree dynamically

Recommended Posts

Hello,

 

I was working with self.progress in scrollTrigger to change the state whenever a certain progress is reached. Please see the below code

 

  useEffect(() => {
    tl.current = gsap.timeline().to(doputMain.current, {
      scrollTrigger: {
        start: "0 0%",
        end: "100% 100%",
        trigger: doputMain.current,
        scrub: 0.5,
        // markers: true,
        onUpdate: (self) => {
          if (self.progress > 0 && self.progress < 0.2) {
            setdoputText(0);
          }
          if (self.progress > 0.2 && self.progress < 0.4) {
            setdoputText(1);
          }
          if (self.progress > 0.4 && self.progress < 0.6) {
            setdoputText(2);
          }
          if (self.progress > 0.6 && self.progress < 0.8) {
            setdoputText(3);
          }
          if (self.progress > 0.8 && self.progress <= 1) {
            setdoputText(4);
          }
        }
      }
    });
  }, []);

I was wondering if there is any way to make it dynamic so that no matter how many elements are there in the state it automatically divides the progress equally to them. For example currently my code has 5 elements so the progress is divided by 20% but if the number increase to 6 then I don't have to add one more line and change everything again.

 

Here is a sandbox for DEMO https://codesandbox.io/s/suspicious-poincare-xc5jc5?file=/src/App.js

 

Thanks a lot

Link to comment
Share on other sites

Thanks for the demo.

 

I think gsap.utils.mapRange() can help

 

https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange()

 

it will basically convert the progress  to a value between 0 and the highest index of elements

 

these are the values I'm passing in

mapRange(lowest progress : 0, highest progress : 1, lowest index 0, highest index : 4, current progress)

 

let index = Math.floor(gsap.utils.mapRange(0, 1, 0, 4, self.progress))
          setdoputText(index)
          console.log("index", index)
         /* if (self.progress > 0 && self.progress < 0.2) {
            setdoputText(0);
          }
          if (self.progress > 0.2 && self.progress < 0.4) {
            setdoputText(1);
          }
          if (self.progress > 0.4 && self.progress < 0.6) {
            setdoputText(2);
          }
          if (self.progress > 0.6 && self.progress < 0.8) {
            setdoputText(3);
          }
          if (self.progress > 0.8 && self.progress <= 1) {
            setdoputText(4);
          } */

 

test it out with a few variable numbers of elements and see how it goes. 

 

Although I don't know everything about your project,  I wouldn't use this approach of assessing the progress using onUpdate. onUpdate fires VERY OFTEN and and it seems wasteful to be constantly re-applying classes and running logic.

 

ScrollTrigger already has toggleClass functionality built in. You just have to create ScrollTriggers for each element like so

 

See the Pen rNvKQQb by snorkltv (@snorkltv) on CodePen

 

Note the text turns green when active.

Hopefully this helps

 

 

 

  • Like 4
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.
×