Use self.progree dynamically

[Akash Ranjan]

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

[Carl]

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