Clamp scrollTrigger progress value

[frederik222]

Hi there,

 

I'm using scrollTrigger  `onUpdate` method which gives access to `progress` and this indicates the `start` and the `end` value which are  the range`0` between `1` , I have tried to clamp those values to get like `0` and `2.8` but this is not working 
 

 function clamp(num, min, max) {
   return num <= min ? min : num >= max ? max : num;
 }

 

 

 

I'm trying to use scrollTrigger with video 

onUpdate(evt) {

   videoScrollNode.currentTime = evt.progress

}

 

the video length is 00:28 , any idea how can i achieve this

 

Thanks for the help.

[GreenSock]

Sounds like the perfect case for mapRange(): 

// create a reusable function that translates between a range of 0-1 to 0-28
let progressToTime = gsap.utils.mapRange(0, 1, 0, 28);

...
onUpdate(self) {
  videoScrollNode.currentTime = progressToTime(self.progress);
}

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

[ZachSaucier]

Hey Frederik and welcome to the GreenSock forums.

 

As Jack said you could use mapRange. However since the progress values is always between 0 and 1 you could just multiply by the max time of your video:

let videoDuration;
videoScrollNode.addEventListener('loadedmetadata', e => {
  videoDuration = console.log(videoScrollNode.duration);
});

// In the ScrollTrigger:
onUpdate: ({progress}) => {
   videoScrollNode.currentTime = videoDuration * progress;
}