Jump to content
Search Community

Tweening "css" properties affects z-index or?

jimthornton test
Moderator Tag

Go to solution Solved by Jonathan,

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 GSAP people,


So I'm having trouble understanding why this is happening. If you hover over the left box in the codepen demo, an overlay image will popup in front of the logo in that left box. 


If you hover over the right box, an overlay image will popup but behind the logo in that right box. 


The only difference between the two functions is tweening css.


I actually don't even need to tween a css property I can simply put the following with no props in the css bracket jawns:

.to("a.one-half#tmg img", 0.4, { opacity: 0.5, autoAlpha: 0.5, css: { } }, 'targetPoint')

... and the same issue happens.


What I'm trying to do on mouseenter is keep the logo on top of the overlay image that get's revealed (while animating it from grayscale to full color, but hide the other logos in the nearby boxes), if that makes sense. 


Any insight would be super appreciated!


Thanks, Jim



See the Pen KrBaXk by jimthornton (@jimthornton) on CodePen

Link to comment
Share on other sites

  • Solution

Hello jimthornton, and Welcome to the GreenSock Forum!


You would need to fix some of your GSAP to() tweens.


I see you are only wrapping some CSS properties inside the css:{} object. if you are going to use the css:{} object then you need to make sure all css properties are inside it. But as of GSAP 1.18 you do not need to wrap your css propertoes inside the css:{} object.


If you do use it, only css properties go in there, that means opacity or autoAlpha ;)


So you have this:

// wrong syntax
.to("a.one-half#tmg img", 0.4, {
	opacity: 0.5,
	autoAlpha: 0.5,
	css: {
		'-webkit-filter': 'grayscale(0)',
		'filter': 'grayscale(0)'
}, 'targetPoint');

But that is wrong syntax, it should be this:

// right syntax

.to("a.one-half#tmg img", 0.4, {
   css: {
	autoAlpha: 0.5, /* use opacity or autoAlpha, not both */
	'-webkit-filter': 'grayscale(0)',
	'filter': 'grayscale(0)'
}, 'targetPoint');

// or like this without the css:{} object wrapper:

.to("a.one-half#tmg img", 0.4, {
    autoAlpha: 0.5, /* use opacity or autoAlpha, not both */
    '-webkit-filter': 'grayscale(0)',
    'filter': 'grayscale(0)'
}, 'targetPoint');

Also keep in mind that anytime you use the CSS filter or opacity property you are pushing your element with that CSS property onto its own rendering layer. And that will adjust or mess up your current z-index order with the new stacking context you get with a new rendering layer.


See CSS stacking context:




Also in your CSS for that codepen. You always want to make sure that the vendor prefixs come first and then the CSS property without the vendor prefix is last.


So this in your css on LINE 30 and 31 for the img.our-work-featured rule:

filter: grayscale(100%);
-webkit-filter: grayscale(100%);

becomes this so the CSS parser parses correctly:

-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* unprefixed CSS property is always last */

Also you using both opacity and autoAlpha on the same tween. You should use one or the other.


autoAlpha is better since it can help with render performance. Please see the CSSPlugin Docs:



  • autoAlpha
    Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});

//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});
Once you fix your tweens we can get a better idea your z-index order.


The best thing to do is first get the stacking the way you want with z-index, and then start adding other CSS properties that will give a new stacking context.


Since right now i would have to change lots of things just to get to checking your stacking context and z-index stack order.


Thanks! :)


  • Like 6
Link to comment
Share on other sites

Glad your getting it worked out :D


Even though tweening is the most fun part.. the initial setup of your stage (html elements) and css positioning is the most important. This allows everything to come together when you get all the heavy lifting done first and then the second is the pay off of animating your elements :)

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