Jump to content
hoejun

How do I apply a class animate child Elements?

Recommended Posts

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?

 

Share this post


Link to post
Share on other sites

Hi hoejun,

 

Welcome to the forums!

 

Don't stress about the Google translator, you're here, that's what matters. 

 

Next time please set a little demo up demonstrating what you are trying to achieve. Even if it doesn't work, it will help us to understand your intent and what step(s) you might have missed.

 

 

I copied your code and placed into a pen, yes it's trivial but it adds a lot of time up when we're going over everyone's question to do this. Help us help you. ;)

 

Only after copying your code over to CodePen was that I saw there was an error in your code. You were using "class" instead of "className"

TweenMax.to(".parent", 1, {class:"+=on"}); //Typo 
TweenMax.to(".parent", 1, {className:"+=on"}); //This is the correct way

Now both of the Tweens you wrote will work. However, I am not sure this is the result you are looking for because of the way you set your CSS cascading. You're setting new classes for child1 and box1 based on whether parent has a class of on or not. GSAP will not Tween the values of the children classes of child1 and box1, it will only Tween the values contained in the on class.

 

I'm adding a width property to the on class and you can see it Tween while the children's classes just flick from one set of properties to another.

 

See the Pen WoYOgB by dipscom (@dipscom) on CodePen

 

Press the "run" button at the top to replay the animation.

  • Like 2

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

I can't think of a quick easy way from the top of my head other than, you create the classes you want to add to the children and add them to the children rather than adding a class to the parent that would trigger an animation in the child.

TweenMax.to(".parent div", 1, {className:"+=newClass"});

Obviously, if you want different classes for different children:

TweenMax.to(".parent .child1", 1, {className:"+=class1"});
TweenMax.to(".parent .child2", 1, {className:"+=class2"});

Maybe someone else knows a way that I don't. There's plenty of things I don't know myself :)

  • Like 2

Share this post


Link to post
Share on other sites

tumblr_mlj0syTLbP1rf1e3ro1_250.gif

 

That is sooo cheating Diaco. It's not even in the docs! You can't bring secret weapons to a fencing duel.

 

There you go hoejun, someone's always going to one you up in life.  <_<

  • Like 5

Share this post


Link to post
Share on other sites

Thanks, Guys !!!!  :lol:

 

 

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?

Share this post


Link to post
Share on other sites

hoejun, I'm not sure I follow what you are asking.

 

Do you think you can get a little demo to show us what is it that you are trying to achieve?

  • Like 1

Share this post


Link to post
Share on other sites

Is there a reason CSSPlugin.cascadeTo() is undocumented? The Plugins all seem to lack detailed API-style documentation, like TweenLite, etc. do. Or did I miss something?

Share this post


Link to post
Share on other sites
39 minutes ago, mattgilbertnet said:

Is there a reason CSSPlugin.cascadeTo() is undocumented? The Plugins all seem to lack detailed API-style documentation, like TweenLite, etc. do. Or did I miss something?

 

It was more of an experimental feature, that's all. Sometimes we'll try some things out and see how they do in the public arena before officially committing to them or a specific API. The cascadeTo() thing doesn't seem terribly useful by a large portion of the audience, so it'll likely be dropped in 3.0 (and that's also why we never documented it). Sorry about any confusion there. 

Share this post


Link to post
Share on other sites
1 minute ago, GreenSock said:

... it'll likely be dropped in 3.0 ...

 

Good to know! Thanks for the quick response.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.