Jump to content
Search Community

Best practice for +1 to an integer using a set range

tome test
Moderator Tag

Go to solution Solved by tome,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi All, 

 

Hopefully someone can point me in the right direction. I'm sure there's a fairly simple solution but i've yet to find an example (probably too remedial!). 

 

Situation:

I have an infographic where animated elements are controlled by a timeline slider. That part works fine.

 

What I need to do now is have two text items update using the same slider.

 

For example, first item has a minimum text value of 47 (always whole integers), a maximum of 91 (range?) - so when the slider handle is all the way to the left the html text reads 47, all the way to the right reads 91 and movement of the handle in-between the two extents +/- the text value. The second item is exactly the same however uses a different range (0.9M > 2.3M)

 

The CodePen (linked) is similar to what I want however the value it is based upon time rather than set min/max values. 

 

Hope that makes sense. Happy to cobble together a more relevant CodePen if needed. 

 

Thanks in advance for any help / pointers / codepen examples!

 

tome

See the Pen hJCqd by Manoz (@Manoz) on CodePen

Link to comment
Share on other sites

Thanks, for the demo and clear explanation. 

 

This percentToRange() function from Chrysto should help:

 

// Update the dragger when the timeline is updated.
  function updateDragger() {
    TweenLite.set(dr, {x: tr * tl.progress()});
    ti.html(percentToRange(tl.progress(), 47, 91).toFixed(2));
  }


  //function from our good friend Chrysto http://bassta.bg/2013/05/rangetopercent-and-percenttorange/
  function percentToRange(percent, min, max) {
   return((max - min) * percent + min);
}

http://codepen.io/GreenSock/pen/JYZLXe?editors=001

  • Like 1
Link to comment
Share on other sites

Lerp (linear interpolation) is the function you are looking for. The middle line in the function clamps it to 0-1 in case the slider is a little off.

function lerp(start, stop, amt) {
  amt = amt < 0 ? 0 : (amt > 1 ? 1 : amt);
  return start + (stop - start) * amt;
}

Here's it running the range 47-91. Just pass in the start and end values and the percent.

 

See the Pen EVREKp by osublake (@osublake) on CodePen

 

EDIT: Carl posted basically the same thing while I was writing this. 

Link to comment
Share on other sites

Thanks again for your input. I've had a go at implementing your suggestions but i'm not getting very far. I think I understand the theory > it's just how to integrate it into my own project which is proving difficult. 

 

I've cobbled together a CodePen (first time!) of the actual project i'm working on :

See the Pen zvaJbq by anon (@anon) on CodePen

 

Currently the values are being changed with the TextPlugin just to illustrate the start and end result

 

Any help would be really appreciated!

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.
×
×
  • Create New...