Issue with starting positions

[tsockeel]

Hello here, 

I have an array of positions for my targets.

So I am setting the timeline with the positions and durations.

It's playing fine but I would like to go step by step also. At t=0s, it seems that my target doesn't have values set.

I found that adding a tween after a tween of duration 0s could erase its property.

 

How to have my target showing at starting values position ?

 

Please find enclosed an example, 

 

Thank you for your help, 

See the Pen GRqxQxE by teddy-sockeel (@teddy-sockeel) on CodePen

[ZachSaucier]

Hey tsockeel and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership! 

 

I think you're wanting something like this? 

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

 

The trick is using a gsap.set() to set the initial state. This is necessary because paused timelines use element's original state when the time is equal to 0, so it jumps to that state. Setting the initial state with GSAP fixes that.

[tsockeel]

@ZachSaucier Thank you very much for your help. It is perfect

[tsockeel]

Hello @ZachSaucier ,

I still have an issue with the starting values. I am very sorry to ask you again, I tried many things but I still don't understand why I don't get the expected result.

 

I integrated the draggable plugin to edit the box positions for tween3 

When creating the timeline, [x,y] are functions which get the data.

x: () => {return d['x']},
y: () => {return d['y']},

 

In my example, I would like to edit the [x,y] values of tween3 when dragEnd.

I update my data array, then I invalidate the timeline to update its cache with the new values from the array. As I understood, it should run functions to update the timeline data from the array at next render.

 

The issue is that it's also changing the initial state. And tween3 positions are tween2 positons. Do you know why ?

 

How to update values of tweens of the timeline ? 

 

See the Pen jOrxdMG by teddy-sockeel (@teddy-sockeel) on CodePen

 

Thank you for your help

[ZachSaucier]

Hey tsockeel. I don't quite follow the end goal. In English (ignoring code), what are you trying to accomplish? The user drags the box somewhere then a set animation happens using that position as the start point? Or something else?

[tsockeel]

Hello Zach, sorry for my bad explanation. 

 

In this example, the goal is to let the user editing the end point. After editing, the user can replay the animation.

The user can see the checkpoints with pause('label'). The array is here to save the timeline parameters and store them for next time.

The end goal is to let the user edit the timeline, changing box positions, changing durations, adding tweens.

 

I tried to show you my issue in a simple demo.

 

[tsockeel]

Here is an updated CodePen : 

See the Pen jOrxdMG by teddy-sockeel (@teddy-sockeel) on CodePen

 

Everything is working fine at the beginning: 

 - Setting timeline parameters from a array (thank you for your help)

 - Play / restart animation

 - Go to tweens positions

 

The issue : 

When I drag the box to edit the ending point of the timeline, the animation is not playing with the updated values from the array. 

I would like that gsap updates its Vars from the updated array with the new positions. Play the animation with the new ending point.

 

That's why, I tried the invalidate function which clean the cache and should update its parameters from the functions set for x and y to get data from the array.

Hope it's a better explantation  

[ZachSaucier]

You should console.log what your data is after you update it: you will see that the values you're setting are undefined. You want this.x and this.y instead. Additionally I think you want to set the last data object, 2 in this case, not 1 like what you have.

 

Then you can see that the invalidate works properly. The only issue is that your .set() for the first set of data is not in your timeline so it's not a part of the animation. Switch the gsap.set() to tl.set() and it works like you want:

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

[tsockeel]

Thank you for your reply.

I am very sorry to paste a code with errors. I tried so many things, the codepen was not right. Sorry and thank to take time to correct these errors. 

 

In your last codepen: 

 - When I click on the Tween1 button to see the box position at the values from the data array (i.e. x=200 y=0), I see the box at x=0 y=0. Do you know why ? 

It works when using gsap.set building the timeline instead of tl.set

 - When I drag the box, and I click the Tweens button, the box position of Tween1 is the same as Tween3. Do you know why ?

 

These 2 points are exactly the issues I tried to illustrate from the beginning. 

[ZachSaucier]

Good point, I didn't think to test your buttons again. I think that might be an error in GSAP. Adding an empty tween to the start of the timeline fixes the issues:

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

 

We'll investigate.

[GreenSock]

I realize this may seem like a bug, but from what I can tell it's not. Let me explain...

 

A set() call in a timeline must record TWO states - the current one and the one that's being set (think of it like "before" and "after") so that when the playhead rewinds past that set(), the pre-set() values can be reverted. Otherwise, things wouldn't render properly when you go backwards. The playhead can't go PAST the beginning or the ending of a timeline. So when you put a set() call at the VERY beginning of a timeline, it technically represents two states (before/after) and when you rewind the playhead all the way back to the very start, which one should it render? See the logic issue? GSAP's timeline has special logic to sense this condition and if you're moving the playhead backwards all the way to the start, it'll render that set() at its "before" state. If we alter that, you'd run into other edge cases that behave oddly (like "why isn't the state getting reset to what it was before my timeline began if I move the playhead all the way back to the very start?") 

 

set() calls in a timeline are inherently tricky because technically you have two different states sitting on EXACTLY the same spot in time, so the only way to distinguish which state to render is the direction of the playhead. 

 

So in your case, it's reverting the values when you rewind all the way back to the start. I think that's the correct behavior. If you disagree, it would be helpful to explain what other logic should be used to determine which of the two states should be rendered when the playhead arrives exactly on top of that position in the timeline. I very well could be missing an alternate solution. 

 

So for your case, moving that set() call off the very start of the timeline (even 0.001 seconds) permits the playhead to actually reach back before it, thus avoiding that extra conditional logic that's in place for zero-duration tweens sitting precisely on top of the 0 position on the timeline (because the playhead isn't allowed to move backward past that, hence the extra conditional logic necessary).  

[GreenSock]

Actually, I think I figured out some logic to inject there that I think makes it even more intuitive and catches this edge case. I can walk up the chain of parent timelines to the root and if the virtual playhead is positioned before any of them (that are unpaused), only revert to the starting values in that case. I've implemented that in the latest beta at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

Better?