Jump to content
Search Community

How do I apply a class animate child Elements?

hoejun test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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?

 

Link to comment
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
Link to comment
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
Link to comment
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?
Link to comment
Share on other sites

  • 2 years later...
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. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...