Jump to content


GSAP - autoAlpha or Opacity does not work for me..

Moderator Tag

Recommended Posts

autoAlpha or Opacity does not work for me.. or any other method to fade/hide elements is not working. I am using TweenLite,TimelineMax and DrawSVG plugin in my project.



It works when I do a codepen but in my actual project it does not work. Has anyone faced this issue. I have checked everything and don't seem to find a solution..


I will try to simulate a codepen of this issue and update this post.


Having a paid membership with GSAP gets you help from GSAP team?

Link to comment
Share on other sites

Hi Jud_ben :)


Welcome to the GreenSock forums.


You don't have to have a paid membership to get help here. Everyone is welcome to ask for assistance. Just an FYI - you mentioned using DrawSVG which is a Club plugin. You may try it out on CodePen, but to use it in your projects you would need a Club membership.


As far as opacity or autoAlpha not working, it's hard to say without a CodePen demo. Showing that to us would be most helpful.


A few things to check:

  • If you're loading TweenMax and other scripts locally, make sure you're pointing to the right directory and don't have typos in your filenames.
  • Be sure you're not using links to the CodePen only versions of the GSAP files
  • Make certain the scripts are loaded before you try to animate something.


As I mentioned - if you can create a CodePen for us that demonstrates the problem, we can be of more help to you.


Happy tweening.


  • Like 4
Link to comment
Share on other sites

At work we have the full club membership and I have a copy of the full downloads and that's what i am using in my project. Not the codepen version..


Everything else works(drawssvg, tweening timelines) except for the show/hide feature..


I am unable to replicate the issue in codepen


I can make my project public and share the url that has the issue..


But I cannot post it in the forum as it involes lot of official assets..


Can I send the url privately to the gasp team so they can have a look at the issue?

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


As Craig mentioned, everyone gets free support and I'm sure you will find that the team will bend over backwards to help. However, it is extremely important that you provide a reduced test case that clearly illustrates the issue. It just isn't practical for us to devote lots of time digging through the complexity of your site that we can't edit.


If you can't replicate it on CodePen the next best thing is to make a public version that is simplified and doesn't have the official assets. 

Just duplicate the page that is having an issue and remove the images and everything that isn't related to the problem.



You should definitely inspect the element in dev tools, look for console errors and confirm that TweenLite is tweening the element's opacity and visibility properly like: http://prntscr.com/bu6par


Also make sure that parent elements have their visibility set to "visible" - that's the only possible issue that comes to mind (without seeing any code).


If you can not find the answer or properly reduce the example to illustrate the issue you can send me a PM and we can discuss 1-on-1 consulting fees. 

  • Like 2
Link to comment
Share on other sites

I think I finally managed to simulate it..


Here it is


See the Pen VjzPxo by jud_ben (@jud_ben) on CodePen


this is what i think the issue is, opacity/autoalpha works only with TweenMax and not with TweenLite

Link to comment
Share on other sites

Hi there, 


The issue in your codepen is that TweenLite does not have CSS support without the CSS plugin. 

TweenMax does have the CSS plugin bundled with it and so it works without adding the plugin separately.


As you can see here 

See the Pen yJvaYa by craigster1991 (@craigster1991) on CodePen

I've simply added the CSS plugin to the pen and it works as expected.


You can read more about the CSS plugin here: https://greensock.com/CSSPlugin

  • Like 6
Link to comment
Share on other sites

Thanks for the demo Jud_ben.


Great job Craig W. Thanks for jumping in.

Link to comment
Share on other sites

Thank you for your quick response.


it would be nice if you could clearly document about this difference between TweenLite and TweenMax.

Link to comment
Share on other sites

Hi Jud,


We do our best in our docs and tutorials to explain that animating CSS properties with TweenLite requires the CSSPlugin.


Please review the TweenLite docs, you'll see the CSSPlugin is mentioned in the Usage section up top: http://greensock.com/docs/#/HTML5/GSAP/TweenLite/


The TweenLite page has a section on Animating CSS Propertieshttp://greensock.com/tweenlite


Also the Getting Started Guide section Loading GSAP fileshttp://greensock.com/get-started-js


These are the 3 biggest "entry points" for beginners. If you feel it needs to be made more clear somewhere else, please let us know. We really want to remove as many hurdles as possible. 

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