Huangism

Ok, I think I have a better understand how timeline works now, thanks

Ok, I kind of understand what you explained. So in my case, using gsap.set to clear prop is the proper way to do it? Or can it be done in the timeline setting somewhere? How would you clear props if we use the timeline? Edit: I think I completely understood what you explained, because I was setting something as part of the timeline but the timeline has already finished, so it does not work. Is that what you meant?

Ok, so to clear props, I should be using gsap.set and not the timeline. This worked on the Pen, i will try it in my project now thanks

The bg colour in css is fine. If you inspect on the div, you can see the inline style is still there. The ending colour doesn't matter, it's just a simple example. I just want to remove the inline styles

The simple pen shows the bg colour going from green to black then back to green. I am clearing props on reverse complete but I still see inline css after. How do I properly clear the inline styles?

this worked perfectly, the reverse was also fine since I set my values before clearing props, thank you

I am just trying to set transform to none but it doesn't seem to be working (I suspect this is intentional). Is it possible to do with gsap as part of a timeline? The issue I was experiencing is that I have a container which has a transform and setting positioned fixed on children don't work as expected due to the transform on the parent. So now I am trying to remove the transform during the animation(not animating the parent)

In my attempt, it was part of the same timeline, and the set to 0 is right after the set to fresh x. So maybe I will give it another try and set the fresh x before either in its own timeline or just a gsap.to

I tried setting the x to the freshest x before setting the x to 0, i thought it would reverse back to the fresh x but no good. Tried to clearprops on the x but still goes back to round 1 position. Anyway, I will just stick to fromTo, seems to be the only working solution in my case. Main problem is that I don't have that single source of x, unless I emit something from the other widget to update it but that won't go over well with the rest of the team. Currently I am using the transform matrix to get the from value and using fromTo works, thanks for your help

I must ask then, how do I clear those? you can point me to the docs if you want, I will have a read

Ok, I see internally record values which cannot be cleared by clear and invalidate. The only reason that I need to set x to 0 is because the x is modified from a different source. Basically the widget you see above will be animated to a normal stacked layout by gsap and I need to set the container x to 0 or else the layout will look very strange. I initially thought gsap would take the starting value and reverse based on it. I think I will stick with the fromTo method for now to avoid touching existing code, thanks for your time

Yes I understand it is better to do everything with gsap (from another forum post) however in my case, it is just not realistic. It's a big project which only affects one part of the site with shared widget across the site. There is concerns of budget and regression which causes time. I am not the boss of this whole thing Could you explain why this occurs? I thought the clear or invalidate or recreating timeline would refresh the values but it doesn't. Can you explain this in simple terms without going too deep? and what did you mean by proxy object? how would that method work(work flow no need for code)?

I have added a simplified Pen just to demonstrate the issue I was having, the Pen is using jquery but my project actually uses angularJS but the behaviour is the same. To reproduce - click on external animate, the gsap animate, then gsap reverse - this completes round one, the reverse goes back to the position before the gsap animation(perfect) repeat the process again above, the position of the translateX goes back to the first round value instead of the new even though I have cleared the timeline, recreated the timeline on every click, and invalidated the timeline. I solved it with a fromTo but what's the proper way to do this?

I actually just solved this by getting the X and using a fromTo to set the x to 0 but the program itself is as described, another piece of js code changes the translateX on the element but after the first round, the X always goes back to the first round X value instead of the new value. it seems using fromTo works now, extra calculation for the X but fixes the problem

I like to apologize in advance that I don't have a working sample but. PEN added - I believe the issue is straight forward enough to understand. The issue occurs for a widget which has a bunch of code and hard to simplify so I was not able to create a pen. Here is my scenario, I have a widget and the translateX is animated using pre-existing code and it is unrealistic to change that. I use gsap to do some other animation. Everything is good except for the translateX value after the first round of animation. I use gsap to set the x to 0 which works great and then at a later time a button click trigger the reverse animation, this also works great and the widget is returned to its original state with the correct translateX. However, if I use the widget again and the translateX changed from previous value by the widget, and I trigger the gsap animate and reverse, the translateX after reversing is cached to the first value instead of the newest. I understand this value is cached so it performs better and you can use clearProps to clear this. I tried using clearProps which does clear the value however clears too much and the widget returns to the starting state with translateX 0. I then tried to create the timeline on trigger every time (uses the same variable name) but this did not make a difference. Then I tried using .clear() on the timeline which also made no difference. My goal is to have the reverse animation return to the translateX that it left from every time assuming that x value could be changed from a different source than gsap. What is the proper way to do this? thank you in advance // also tried to set timeline to null arrangedExpand_Timeline = null; // tried this clearing with the clear before and after the timeline creation // triggered on user interaction arrangedExpand_Timeline = gsap.timeline(); arrangedExpand_Timeline.clear(); // this is the set code arrangedExpand_Timeline.set( ".content-item-container", { duration: 0, x: 0 } ); // .play() and reverse() is triggered later