Parent Child Opacity to be different

[Ravi Variar]

Hi all:   I am fading out a div tag.  Next I would like to take an SVG element in the div and make it Opacity 1.  It seems this is not possible please advise.

It is a simple ask that this diagram fades back and I can then control each element  Opacity separately. 

t3.fromTo("#divsvg", { opacity: 1 }, { opacity: 0.25, duration: 1 })
      .to("#gDSPolyTitle", 2, {
        x: 50,
        opacity: 1,
        delay: 1,
        ease: "back",
      });

 

thanks

Ravi.  

 

See the Pen LYxMOeq by ravivariar (@ravivariar) on CodePen

[Shaun Gorneau]

While child elements don’t inherit their parent element’s opacity, they are affected by it. If a parent has an opacity less than 1, the child’s appearance (even though its opacity is 1) has a new maximum opacity of the parent. The child can be made to appear more transparent but not more opaque. If you need elements to have different opacity values while maintaining full opacity on at least one of them,  they have to be at similar DOM depths.

[Ravi Variar]

2 hours ago, Ravi Variar said:

 

Thanks Shaun,  this is the behavior that I saw during experimentation,  I could go lower than the parent opacity.  Unfortunately if I keep at same level then the grouping is lost.    Is there any other property that can be used?  I have tried visibility, autoAlpha etc.  while keeping the hierarchy looks like all of them can only go to the parent level.  I thought visibility gets over-ridden but somehow hiding the parent the child does not get shown.  Not able to use that either.  Appreciate your message Thanks, 

[GreenSock]

9 hours ago, Ravi Variar said:

Is there any other property that can be used? 

No, I think it would be logically impossible. The container's opacity should affect its descendants. It'd be pretty weird if it didn't.

[Ravi Variar]

21 hours ago, Ravi Variar said:

t3.fromTo("#divsvg", { opacity: 1 }, { opacity: 0.25, duration: 1 }) .to("#gDSPolyTitle", 2, { x:

Yes thanks,  I can only use visibility and completely hide at the group or div level.  this the child can override and be visible.  

[Shaun Gorneau]

@Ravi Variar, what is it about the parent element that you would like to be transparent/semi-transparent without affecting the child element? If it’s the background-color and/or border-color (or other similar attributes) you can use rgba values to apply an alpha channel value.

[Ravi Variar]

I have one SVG that is a software architecture diagram with different groups containing rectangle, text, arrows, circles.  I am animating this using GSAP and adding audio at appropriate intervals.  So,  if for example SVG becomes Opacity 1 initially the child elements of one group need to be displayed one by one (with narration, still working on audio linking).   During animation if a sub-group has to brought upfront the others opacity reduction will provide appropriate focus.  I do not know how to use RGBA   thanks 

[Shaun Gorneau]

Ah, ok. Have you looked into fill-opacity and stroke-opacity for the SVG elements you'd like to affect?