[How do I apply a class animate child Elements?]

Thanks, Guys !!!! 

 

 

I have one question.

 

 

 

 

 

In the above Codepen example, the first "+ = on" applies to all Child Elements, but "- = on" applies only to Parent Element.

 

If one class is added, it can be solved by .reverse () on the returned TweenLite Arrays, but if more than one class is created, a problem arises.

 

As a result of testing, Child Elements that are animated and applied with Inline Style can not be animated by CascateTo. Is there a good solution?

[How do I apply a class animate child Elements?]

Thanks, but I want all the child elements to be animated when the .on class is added to the .parent tag

 

I wonder if there is no way to animate the changing attributes of Child Elements in GSAP.

[How do I apply a class animate child Elements?]

please help me !! 

 

Sorry for the Google translation ( ㅠ_ㅠ)

<style>
.parent{width:500px; height:500px; background-color:#000}

.parent .child1{position:absolute; width:100px;height:300px; display:none; background-color:#f00}
.parent .box1{position:absolute; width:50px; height:50px; background-color:#0f0}
.parent .child2{position:absolute; width:300px;height:300px; display:none; background-color:#00f}

.parent.on .child1{width:50px; height:500px; display:block; background-color:#ff0;}
.parent.on .box1{width:30px; height:30px; left:300px; top:300px;}
.parent.on .child2{width:500px; height:30px; display:block; background-color:#0ff;}
</style>

<div class="parent">
  <div class="child1">
    <div class="box1"></div>
  </div>
  <div class="child2">
  </div>
</div>

TweenMax.to(".parent", 1, {class:"+=on"})   //Does not work

TweenMax.to(".parent .child1", 1, {class:"+=on"})   //Does not work

 

I know that you can animate through classes.

BUT How can I animate child elements through a class of parent elements?