Jump to content
Search Community

Interpolating using staggerTo: from one array w/ values to the next

fabiantjoeaon test
Moderator Tag

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 there!

 

Let's say I have the following arrays with just numbers:

[0, 0, 0, 0]

and

[40, 50, 75, 80]

How do I interpolate from the first to the second, using staggering/cycling (with GSAP)? (And with staggering I mean, first do the first item, then after some delay, do the next).

Note: I have already converted the single number values to objects so that GSAP can work with them (so [{y: 0}, {y: 0}] and so forth

I am not working with DOM elements directly at the moment, I just want to interpolate the values, and to control this in my timeline

Edited by fabiantjoeaon
No dom elements
Link to comment
Share on other sites

Since staggers expect the first parameter to be an array of targets, you've gotta handle things a bit differently. I whipped together a "staggerArray()" helper function for you (customize as you see fit):

 

var a = [0, 0, 0, 0];

staggerArray(a, [10,20,30,40], {duration:1, stagger:0.5, round:true});

//vars accepts: duration, stagger, round, as well as any typical vars for TimelineMax (like onComplete, onUpdate, repeat, yoyo, etc.)
function staggerArray(start, end, vars) {
  var tl = new TimelineMax(vars),
      proxy = {},
      duration = vars.duration || 0,
      stagger = vars.stagger || 0,
      proxyUpdate = function(original, proxy, i) {
        return function() {
          original[i] = proxy[i];
        };
      },
      v, i;
  for (i = 0; i < start.length; i++) {
    proxy[i] = start[i];
    v = {};
    v[i] = end[i];
    v.onUpdate = proxyUpdate(start, proxy, i);
    if (vars.round) {
      v.roundProps = i + "";
    }
    tl.to(proxy, duration, v, stagger * i);
  }
  return tl;
}

 

Here it is in action: 

See the Pen oMbwpw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

 

  • Like 4
Link to comment
Share on other sites

That is amazing! I think it will work, I just have to modify this function a bit because my Timeline already exists, so I don't have to return a new one.  
I will post the results here, if I have some further questions.

Thank you for your help!! :)

  • Like 1
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...