Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Need help for clamping a mapRanged value.

Go to solution Solved by OSUblake,

Recommended Posts



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

Link to comment
Share on other sites

  • Solution

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


  • Like 2
Link to comment
Share on other sites

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.

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.