Need help for clamping a mapRanged value.

[romain.gr]

Hi,

 

I'm trying to mapRange a value (with minimum and maximum returned value), I though firstly that in mapRange(inMin, inMax, outMin, outMax, valueToMap), the outMin and outMax would be the maximum value returned by the method but in fact it maps the value after the outMax and before the outMin.

 

So in : 

 

var zoom = gsap.utils.mapRange(.27, .5, 1, 1.2, zPos);

 

as I understand (and that s how it works), it can returns value greater than 1.2 and smaller than 1. What I want is to clamp the values, so if it's greater than 1.2, the value is 1.2, if the value is smaller than 1, the value is 1;

 

I've been trying to pipe the mapRanged value into clamp() or snap() but I guess I'm missing something or not doing it in the right order. I've read the doc and watched the vids, I'm unable to make it works. If anyone could help me on that it would be great. 

 

In the codepen, I'm using handsfree.js which tracks head position, so I'm tracking the distance between the head and the webcam (it returns a number between 0 and 1, 1 is when your head is very close to the webcam, anyway).

 

line 46 : 

 

var zPos = data.weboji.translation[2];

then line 51 :

 

var zoom = gsap.utils.mapRange(.27, .5, 1, 1.2, zPos);

the line 59 :

 

gsap.to('html', {
	'--video-blur': blur + 'px', 
	'--video-overlay-opacity': opacity, 
	'--video-overlay-zoom': zoom,
	'--video-overlay-blur': vidOverlayBlur + 'px',
duration: .25});

Can someone help me to return a value no greater than 1.2 and not smaller than 1?

 

Thank you 

See the Pen QWMywma?editors=0010 by romaingranai (@romaingranai) on CodePen

[OSUblake]

Hi romain, 

 

You will need to clamp the values before calling mapRange. Using pipe would be really good for this kind of thing.

 

let transform = gsap.utils.pipe(
  gsap.utils.clamp(0.27, 0.5),
  gsap.utils.mapRange(0.27, 0.5, 1, 1.2)
);

...

transform(0.2) // 1
transform(0.6) // 1.2

 

[romain.gr]

Hi OSUblake,

 

👍 Thank you, that's what I want, I think I was confused with snap and clamp, and with the mapRange with 5 arguments, anyway thanks for the quick answer.