Animate to Inherit Interpretation Issue

[themepunch]

Hi Folks,

 

i made an example below.  Seems that animating some attributes to "inherit" (i.e. Color, Background color, Border Color) will pick some kind default  rgba(255,255,255,0) value instead of picking the parent elements value.   

 

I have a complex animation structure with split Texts, where i need to be able to go back to Inherit color which seems not to work right now. 

The Simple Example i shared below should explain it.

 

Hope you have some solution for this  ?  Thanks a lot and have a great day guys ! 

 

Krisztian from ThemePunch

 

See the Pen jKqzyB by themepunch (@themepunch) on CodePen

[Shaun Gorneau]

My suggestion would be to get the computed styles that `inherit` renders ... and tween back to those values.

 

See the Pen wXGRdp?editors=0110 by sgorneau (@sgorneau) on CodePen

 

 

Hope this helps and happy tweening!

 

Shaun

[themepunch]

Hi Shaun,

 

Thank you for your feedback. I was hoping to have some kind of "low budget" solution   Of course i could pre cache all kind of values and attributes, however in complex environments handling tons of different interactive issues i was looking for to save some extra work.  In case this is a "bug" , the developers may find a solution, other way i will need to go the hard way  

 

Thanks again and have a great day,

Krisztian 

[Shaun Gorneau]

Yeah, I'm not sure how 'inherit' would be handled globally in terms of a tween target value. It can mean different things at different times. For example, what if a parent was tweened prior to the current tween and the inherited property value changed there? Or what if that parent doesn't even declare the inherited property ... how far up the tree would it look at any given time? That's a tough one.

 

One thing I guess that could work in some/many situations would be to .set() the property(ies) to `inherit`, capture the computed styles, then immediately go back to the previous tween's state and then tween to the newly computed values. This would work if you're open to 'inherit' not necessarily being the original 'inherit' value.

[themepunch]

I understand your point however I do not expect to see  real "inherited" values by rendering or calculating computed style on demand by greensock.

 

I am just curious why the element get a color:rgba(255,255,255,0); background-color:rgba(255,255,255,0);border-Color:rgba(255,255,255,0);  at setting or tweening things to "inherit".  I would except color:inherit; background-color:inherit... on the element.   

 

I guess i am maybe looking for some kind of  clearProps:"color, borderColor, backgroundColor" on the element inside the timeline chain at the right position. However it seems if i add clearProps in timeline, i do not get the same result than i use it as set and let things render immediately.  And this makes me my life hard now   
 

I am building the new generation of Slider Revolution Builder (see below the editor) and as you can see i allow things to animate combined on element, splited element (chars, words, lines) and even further splits.  Setting color behaviour on different levels makes me a headache... Anyway, thank you for your suggestion ! As you also suggested i will need to cache things back to the "roots" of the element to be able to handle always the best way.

 

Have a great one again, and thanks for this amazing Tool GreenSock which is just simple the best out there ! 

 

[Sahil]

Quote

I am just curious why the element get a color:rgba(255,255,255,0); background-color:rgba(255,255,255,0);border-Color:rgba(255,255,255,0);  at setting or tweening things to "inherit".  I would except color:inherit; background-color:inherit... on the element.   

 

GSAP doesn't support 'inherit' and treats it as any random string that wouldn't be a color so it animates to default rgba value.

 

I understand what you are saying about clearProps, I think it has to do with the how add method works. @GreenSock can explain more accurately what is happening in this particular case but in the mean time take a look at following thread with similar issue.

 

 

I instead used set method of timeline directly and it works as expected.

 

See the Pen pKErWL?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[themepunch]

Thank you ! I read the other post and it brings some light in the darkness.  I think i will need to give a second look on the suppressEvent variable as well.  Even using Greensock since Flash Time i can learn tons of new things .   So again thanks for your feedback and have you all a great day ! 

 

Greetings from the ThemePunch Team !