Jump to content
Search Community

Animating CSS properties of child elements of parent selector

mmc test
Moderator Tag

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

Hi!

 

I really tried and searched to get this runnin but i couldn't found a proper solution:

 

I know that its possible with the CSSPlugin to animate classes like:

 

TweenMax.to($element, 1, { className: '-=myclassRemove' });

TweenMax.to($element, 1, { className: '+=myclassAdd' });

 

Now the Problem is that the selector is $('body') and the classes change the color sheme (fonts etc.) but there are no css-changes directly on the body. Child-Elements get new colors with the body added class e.g. '.body-class-orange' so every elements that change have in css like .body-class-orange h2 etc. ... 

 

I think there is no animation because there are no directly css changes to the body ....

 

Is there any possible way to animate the css-changes of the child elements where somthing changed ? I tried also CSSPlugin.cascadeTo ... but it didnt work either .... is it even possible ? i dont want to use css transitions :)

Link to comment
Share on other sites

Hi,

 

I'm not sure I understand the question or what you mean by there are no css changes on the body.

TweenLite.to("body", 1, {className:"+=new", delay:1});

The code above causes all the properties in .new to be animated and cascade down to child elements.

 

http://codepen.io/GreenSock/pen/BzvVYJ

 

To help us better understand the problem, please provide a CodePen demo (you can just fork mine) that clearly shows what isn't working. We'll be happy to look into this further.

 

Thanks!

  • Like 2
Link to comment
Share on other sites

Thanks for the fast reply:

 

It's like this scenario (in a big project)

 

See the Pen EyGpmN by anon (@anon) on CodePen

 

It seems like it doesnt work in 2 cases: 

 

- when there is an old class on it the new class doesnt overwrite it (when you remove the old class before it works)

- when the childs are selected with more detail (like .new h1) it doesnt seem to work either

 

maybe im already really confused and you know a easy solution :) sometimes it's just because you are digging already to deep or to long around :)

Link to comment
Share on other sites

Hello mmc,

 

From what i see in your code, it is doing what its supposed to do, since your .old CSS rule is the last rule. Meaning that the .old CSS rule comes after your CSS .new rule, overriding it since they are both on the body tag.

 

That has to do with what Carl mentioned above regarding CSS cascading.

 

In order to override the CSS .old rule .. you need to make your .new rule more specific.

 

In CSS the last rule for the same element will override the last rule unless it has a higher specificity.

 

So you have to change the .new CSS rule to be more specific since it is above your .old CSS rule.

 

Something like this changing the CSS .new rule to body.new:

 

See the Pen akPjGw by jonathan (@jonathan) on CodePen

 

This will NOT override .old CSS rule

/* this will NOT override .old CSS rule */
.new {
   color:red;
   background-color:yellow;
   font-size:30px;
}

/* .old CSS rule is  last so it overrides the .new CSS rule */
.old {
  color:blue;
  background-color:red;
  font-size:10px;
}

This WILL override .old CSS rule

/* this will override .old CSS rule since it is more specific */
body.new {
  color:red;
  background-color:yellow;
  font-size:30px;
}

.old {
  color:blue;
  background-color:red;
  font-size:10px;
}

or you need to swap your CSS rules:

.old {
  color:blue;
  background-color:red;
  font-size:10px;
}

/* this will override .old CSS rule since it is last */
.new {
  color:red;
  background-color:yellow;
  font-size:30px;
}

I would recommend that you visit this page on CSS specificity:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

 

Other good stuff for CSS:

 

https://developer.mozilla.org/en-US/docs/Web/CSS

 

If you have any additional questions feel free to let us know!

 

:)

  • Like 4
Link to comment
Share on other sites

Your welcome..

 

So what is it your trying to do with the last codepen example?

 

Do you just want the h1, h2, h3, and p tags to animate from red to yellow? im a little confused on what you would like to animate.

 

Are you only trying to change the styles on the h1, h2, h3, and p tags. But not the background color of the body tag?

 

Any additional info would be greatly appreciated!

 

Thanks!

Link to comment
Share on other sites

Hi.

 

Yes exactly. The css styles are defined like in my example (.color-theme-orange h1 .... )  so that if the body switches the class the whole website becomes a new color theme. I would like to animate that changes (color changes) ... at the moment the current color-class gets removed and the the new one gets added ....

 

See the Pen VjqJAQ by anon (@anon) on CodePen

 

Thank you Jonathan 

Link to comment
Share on other sites

hmm, I think what you are asking may be a logical impossibility. 

 

let's forget altogether that the body may start with a .old class and things like

<body class="old new">

 are going to be cause hassles.

 

If your css only has this rule


.new h1,
.new p {
  color:red;
  background-color:yellow;
  font-size:30px;
}

and then you do a tween like

TweenLite.to("body", 1, {className:"+=new")

There are no properties for the engine to animate as .new doesn't exist anywhere in your css. 

In order for className to do anything, the class that you are adding needs to be defined somewhere. 

 

I think the closest you are going to get to a single tween creating the cascading effect you want is to animate a CSSRule like:

 

var startRule = CSSRulePlugin.getRule(".old h1, .old h2, .old h3, .old p");
TweenLite.to(startRule, 1, {cssRule:{color:"red", backgroundColor:"yellow", fontSize:30}});

http://codepen.io/GreenSock/pen/kXVNKO?editors=0110

 

docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSRulePlugin/

 

 

However, I don't recommend this as a perfect solution for your situation. If you have 3 or 4 different themes that you want to animate to at any time you will run into problems as animating a CSSRule literally modifies the stylesheet. So if you animate ruleA to ruleB, ruleA is changed forever to be the same as ruleB. If you then animate to ruleC... there is no going back to ruleA.

 

Also, if your h2 needs a different color then your h1 this will blow up pretty quickl too.

 

Now that I understand better what you want to do, I think it would be a handy feature, so I don't fault you for asking. Just not sure it's possible.

 

You said you didn't want to use CSS transitions, but I'm curious if they offer a perfect solution that doesn't require a lot of code

 

Can you show how a CSS transition would animate between the christmas and halloween themes by just switching the body class from christmas to halloween:

 

http://codepen.io/GreenSock/pen/WxPNZY

 

I'm not terribly familiar with transitions and would genuinely like to know if they have an advantage here.

 

Thanks!

 

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

Just to add to Carl's great advice!

 

Even with CSS transitions you would need to add the transition property to all the elements you want to animate. Which will be a lot for the page to paint and render at once, since you want every element on the page to animate.

 

The GSAP equivalent would be to do the same by creating new tweens with CSSRulePlugin for all elements. That can be done by using the same class on those elements so you could have less tweens.

 

Me personally would just use regular TweenLite (TimelineLite) or TweenMax (TimelineMax) tweens for more control :)

  • Like 2
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...