Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
treynola

Parent and Child Div Opacity :: Integration of Greensock and thatsNotYoChild.js

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

I enjoy using Greensock and CSS3 but have had problems integrating
Parent and Child Div Opacity. I ran into this script (thatsNotYoChild.js link below)
and was wondering the best course for integration of the scripts together
if you had a moment to review them that would be awesome.

 

thatsNotYoChild.js
Link:
http://www.impressivewebs.com/fixing-parent-child-opacity/

 

My UI structure is based in the world of the WordPress CMS to which I add Greensock and JQuery. Building a UI with transparent Parent Divs and wanting non transparent Child Divs to be inside is the final goal : Layering Legible Copy and non transparent images correctly on top of Parent transparent Divs in a visual UI experience.

 

I'm not sure what the best course for action would be I am in love with Greensock and would love to use a Greensock solution instead of the extra javascript.

 

Thanks for your time in advance,
Trey

 

 

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

So glad you enjoy using GreenSock tools. Thanks for posting your question.

 

I have to say that I side with the author of that article and would be inclined to solve this "issue" as he suggests:

 

-----

 

The Best Way to Resolve This Issue
I’m guessing that in more than 90% of cases, this is pretty much a non-issue. If you need transparency on a parent element, you can do it using a few different methods that avoid this parent-child opacity issue:
 
  • If it’s only a background color on the parent, use RGBA or HSLA
  • If it’s a background image, use a transparent PNG
  • If you’re just desiring a “washed out” look for a color or background image or pattern, do it in your image editor, or sample the washed-out color you want and insert it with Hex or RGB in your CSS

---

 

Using a script to un-parent children and absolutely position them seems like it could be more harmful than helpful.

 

Personally I have a tough time imagining a situation where one would need a child to be visible when its parent is not. It seems logical to me the way opacity has been implemented in the browser — change the opacity of the parent, and the child changes too. I think it would be way too awkward if changing the opacity of the parent did not effect the children. Imagine the headache of looping through all the children of the children of the children?

 

Perhaps I'm missing something though. Do you have an example that can't be solved with the steps listed above? 

 

Perhaps someone else here will chime in with their thoughts and experience with this.

  • Like 3
Link to comment
Share on other sites

I'm with Carl - I've never found the need to do something like this since you can always 'fake' it with transparent colors and images. I'm also a little unsure what the integration with GSAP you need here is. Is there a compatibility issue with GSAP when you use this script? Or are you just asking GreenSock to rewrite it for you and include it in GSAP?

 

That script is barely 50 lines long, and could become even tinier with a bit of minification - if you can't avoid the transparent parents, this script seems like it should serve your purpose pretty well.

  • 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.
×