chris24k

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.

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...

Thanks again, for the improvements. Great support indeed!

So, this is what I came up with. I do the whole bezier calculation in advance and add all the equally lengthed tweens into the timeline. Looks good to me Cheers, Chris

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.

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. Here is my pen. 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?