Unable to totally clear a timeline(cached value issue)

[Huangism]

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

 

See the Pen dyYazJE?editors=1111 by Huangism (@Huangism) on CodePen

[ZachSaucier]

Hey Huangism. Without a demo exemplifying exactly how things are setup and changed in your situation it's impossible to say for sure how to fix this. I highly encourage you recreating a similar situation from scratch (i.e. just using a simple rectangle). 

[Huangism]

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

[Huangism]

Quote

Hey Huangism. Without a demo exemplifying exactly how things are setup and changed in your situation it's impossible to say for sure how to fix this. I highly encourage you recreating a similar situation from scratch (i.e. just using a simple rectangle). 

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?

[ZachSaucier]

I'd say the proper way is to use a .fromTo()

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

 

It's generally not good to mix who has control over properties of objects. A single source of truth is vital. Maybe it'd make sense to use a proxy object if you need both to be able to animate the values.

[Huangism]

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)? 

[ZachSaucier]

4 minutes ago, Huangism said:

Could you explain why this occurs? I thought the clear or invalidate or recreating timeline would refresh the values but it doesn't.

You clear the timeline, yes, but GSAP records the values that it set on objects internally so you'd have to use GSAP to set the value for that to be updated.

 

12 minutes ago, Huangism said:

what did you mean by proxy object? how would that method work(work flow no need for code)? 

The demo above where the variable x is used as the single source of truth is arguably an example of a proxy. That way GSAP and the other part that's controlling the value know where to go to get the most up to date information regarding the property.

 

But what I was meaning is more helpful if you had multiple properties that you're affecting then you'd use an actual object. Something like this:

var proxy = {x: 0, y: 0};

// later
t = gsap.to(proxy, {
  x: 100,
  onUpdate: () => gsap.set(".content-item-container", {x: proxy.x})
});

 

[Huangism]

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

[ZachSaucier]

2 minutes ago, Huangism said:

internally record values which cannot be cleared by clear and invalidate

Clarification: cannot be cleared by clear and invalidate on a timeline. They can be cleared if you affect the object itself.

[Huangism]

2 minutes ago, ZachSaucier said:

Clarification: cannot be cleared by clear and invalidate on a timeline. They can be cleared if you affect the object itself.

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

[ZachSaucier]

6 minutes ago, Huangism said:

how do I clear those?

Set it to a new value: gsap.set(obj, {x: 0}) or gsap.set(obj, {clearProps: "x"});

[Huangism]

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

[ZachSaucier]

23 minutes ago, Huangism said:

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.

If the tween is created after you set it then it should revert back to that value.

[Huangism]

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