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.

Here is an updated CodePen : https://codepen.io/teddy-sockeel/pen/jOrxdMG 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

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.

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 ? https://codepen.io/teddy-sockeel/pen/jOrxdMG Thank you for your help

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

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,