Multiple point transitions

[borbulon]

Hey guys - 

 

It's been a while since I used TweenMax (AS version, about 3 years ago was the last time), and now I'm trying to use it again in JS. I'm running into a big issue though.

 

I have a tween I'm receiving in data as a set of points (in one case, 158 points), as well as an easing type which is supposed to span all of those points. Of course these points do not necessarily define a straight line. I'd rather not have to calculate the time for each segment of the total line of tweens (for obvious reasons, I hope) based on the easing equation. It would appear that easing is not something that can be applied to TimelineLite/Max as a whole - but is is possible to tween across multiple points, like

TweenMax.to(thing, dur, { 
  left : [233, 234, 235, 236], 
  top  : [0, 12, 8, 23], 
  ease : 'Power2.easeIn' 
});

?

 

By the way, I am aware that I can put the number of points into a TweenLite instance and get the correct point in time for any moment along that point that way, and by that I can derive the duration of each segment of the total tween. I was hoping for a shorter route, though.

[Rodrigo]

Hi,

 

Nope, GSAP takes one value at a time for each property and right now you're passing an array of values and this is generating a tween that goes to the first point of each array.

 

What you could do is loop through the points' arrays and for each point add a to() instance in a parent timeline:

var points = {left:[5,10,15,20], top:[5,10,15,20]}
    pointAmount = points.left.length,
    tl = new TimelineLite({paused:true});

for(var i = 0; i < pointAmount; i++)
{
  tl.to(element, time,
  {
    left:points.left[i],
    top:points.top[i],
    ease:Power2.easeIn
  });
}

Then you can later play/reverse and do anything you want with that timeline.

 

Finally there's a nifty little trick. You can tween any object property using GSAP and that includes tweens/timelines and their properties, for example the progress. So you can tween the entire timeline using a specific easing function for the complete instance. All you need is know how long is the timeline:

var points = {left:[5,10,15,20], top:[5,10,15,20]}
    pointAmount = points.left.length,
    tl = new TimelineLite({paused:true}),
    tlDuration;

//after the loop get the timeline's duration
tlDuration = tl.duration();

// now create the instance to tween the timeline's progress
// since the timeline is paused it's progress is currently 0
TweenLite.to(tl, tlDuration,{progress:1, ease:Power3.easeInOut});

Like that you only need to give a specific duration for each of the timeline's instances, also you can set a unique duration for the timeline in the tween instance:

// the timeline lasts 10 seconds
TweenLite.to(tl, 10, {progress:1});

// the timeline lasts 5 seconds
TweenLite.to(tl, 5, {progress:1});

As you can see there's a lot of flexibility and options for this cases.

 

Rodrigo.

[borbulon]

Thanks for the quick reply, Rodrigo. It would seem than tweening a timeline of multiple equal tweens is exactly what I need. Hopefully it's performant enough for my use case.

[Carl]

Cool, sounds like Rodrigo's solution (as always) is right in line with what you need.

Taking his advice one step further you can

 

1: create a single tween using the BezierPlugin to animate along a path of points

2: set the curviness of the path to 0 (straight lines)

3: give the tween an ease of Linear.easeNone

4: tween the progress of the tween using any ease you want

 

BezierPlugin does a lot of work to ensure that each path segment is played at constant speed regardless of its length.

 

Check out this demo: http://codepen.io/GreenSock/pen/qLKlx