[Bezier curves with time value for each coordinate]

I am using TweenLite.min.js and TimelineLite.min.js from cdn, but it doesn't make any difference, whether I use them or TweenMax.min.js or have them all locally in place. The compiled code doesn't look wrong (tried with WHITESPACE_ONLY and ADVANCED).

 

If I use keyFramesRed[0] instead of curvePointsRed[0] it works, so I guess it's because

keyFramesRed[0] = {x:100,y:100,t:2} // values assigned

and

curvePointsRed[0] = {
        x:bezier(all_those_params), // methods assigned
        y:bezier(all_those_params)
      }

Its either that, or something in my local setup, since the set function is the same in both versions.

 

But since the workaround works I'm not going to investigate any further for now as there is a deadline comming up soon.

[Bezier curves with time value for each coordinate]

This is a little off topic, but I just found something interesting. Thought I share, although it could be nothing, since I'm very new to javascript and haven't gotten around much yet...

 

Check this code:

var tlMain = new TimelineLite({onUpdate:updateSlider});
tlMain.add(tlRed, keyFramesRed[0].t)
  .set("#redBox", curvePointsRed[0], keyFramesRed[0].t - 0.001);

curvePointsRed[0] is { x: 100, y: 100 }, so these can be used as vars for the tween. That code works in the pen, but not in my environment. I looked into the sources

p.set = function(target, vars, position) {
    position = this._parseTimeOrLabel(position, 0, true);
    if (vars.immediateRender == null) {
        vars.immediateRender = (position === this._time && !this._paused);
    }
    return this.add( new TweenLite(target, 0, vars), position);
};

and it complans that vars.immediateRender is undefined, thus creating an error.

If I call the set method like this

var tlMain = new TimelineLite({onUpdate:updateSlider});
tlMain.add(tlRed, keyFramesRed[0].t)
  .set("#redBox", {x:curvePointsRed[0].x, y:curvePointsRed[0].y}, keyFramesRed[0].t - 0.001);

everything works.

 

I like being lazy, so using curvePointsRed[0] directly would be my first choice. Would it make sense for you to check for 'undefined' instead of 'null' inside of the set method? I guess the problem is on my side anyway, since it does work flawlessly in the pen. Maybe it's the fault of the closure compiler which i'm using, who knows...

 

 

[Bezier curves with time value for each coordinate]

Thanks again, for the improvements. Great support indeed!

[Bezier curves with time value for each coordinate]

So,

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

. I do the whole bezier calculation in advance and add all the equally lengthed tweens into the timeline. Looks good to me

 

Cheers,

Chris

[Bezier curves with time value for each coordinate]

Thank you Carl for clearing things up. Really apprechiate your answers.

 

Its unfortunate, that this can't be done directly with bezier curves. I think I will try to preprocess the animation curve to get a set of points I can use for bezier. I'll let you know how it goes.

[Bezier curves with time value for each coordinate]

Hi all,

 

I just started to learn GSAP and I really love it! There is something I need to do, which might be a bit too specific to be of anybody elses interest, but still I'd like to get some help on this one (there are several issues I'm dealing with).

 

The requirement is to have a timeline of fixed length, say 8 seconds. It needs to be controlled by a slider. During execution, some items will appear, move around and dissappear at specific times. None of these is to be expected to be visible at the beginning or the end of the timeline, although the timeline has to last a bit longer than the last tween, i.e. all items have reached their destinations after 6 seconds, but the timelines length has to be 8. In my current workaround I just append an empty Tween with a duration of 2 secs which doesn't change any values.

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

.

 

Now to my question. These animations need to be smoothed with bezier curves, but as far as I know one can only specifiy an array of values and a duration. How can I make sure, that the animated object will be at point x at time t, when the point distribution over time is not equidistant?

 

Looking forward to your answers

 

Thanks,

Chris

 

 

Other issues (not related to the main question):

• Is there a better way to extend the timeline's duration (without affecting its timescale), other than the method I described (adding an empty tween)?
• Can I set all Tweens in a Timeline to the same easeType at once?
• I noticed, that my pen doesn't work on its first run. If you press restart or use the slider Everything works as expected. What did I do wrong?