Jump to content
GreenSock

ChrisGiggles

Why does my background go transparent?

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

So I just started using GSAP yesterday and still trying to get a hang of everything. I ran into a weird issue almost right off the bat. I have a timeline where the first thing I do is change the background color of the header.

 

The problem I'm encountering in Chrome & Safari is that the background goes from: semi-transparent white -> fully transparent -> semi-transparent black.

 

It's not supposed to go to fully transparent obviously. Firefox even refuses to animate back to the original semi-transparent white.

 

Enough talk, here's the pen: 

See the Pen HcDze by chrisgiggles (@chrisgiggles) on CodePen

 

Bonus points: How am I doing code-wise? Is it sensible to have two timelines? Should I create one timeline and control the stop points with keywords? 

Link to comment
Share on other sites

Hi Chris and welcome to the Greensock forums.
 
Yeah it is a strange behaviour that shouldn't happen. In fact the console in dev tools reports that the header background alpha goes to 0 and then to 0.85.
 
Thanks for providing the codepen it was very useful.
 
In the mean time a workaround is to remove the background in the stylesheet and add an inline using a set instance, like this:
CSS

.header {
  /*background: rgba(255,255,255,0.9); /* omit on base styles */
  position: fixed;
  top: -100%;
  width: 100%;
  height: 100%;
  z-index: 999;

  
  -webkit-transform: translate3d(0, 60px, 0);
          transform: translate3d(0, 60px, 0);
}

JS


TweenLite.set(theHeader, {background:"rgba(255,255,255,0.9)"});

With that code the background alpha goes from 0.9 to 0.85 and vice versa on reverse.
 
Also instead of using the setTimeout to add and remove classes you can use a set instance at the timeline's end to do that, like this:

tlIn.to(theHeader, 0.6, {background: 'rgba(0,0,0,.85)'})
    .to(theHeader, 1.2, {top: '-60px', ease:Power1.easeOut}, '-=0.6')
    .from(sayHelloTitle, .2, {opacity: '0', scale: '0.9'})
    .staggerFrom(contactTiles, .25, {opacity: '0', scale: '1.2'}, .1)
    .add("addClass", "+=1.2")//add label 1.2 seconds after the timeline end
    .set(theHeader, {className:"+=to-bottom"}, "addClass")//add class when the timeline reaches this label
    .set($("body"), {className:"+=no-scroll"}, "addClass")//add class when the timeline reaches this label
    .add(function(){btnHello.html('GO BACK');});

And you can do the same thing with the out timeline.

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock.

 

Glad to see you trying the tools, and thanks for the codepen demo. Looks great.

 

Instead of tweening background, use backgroundColor. Take a look here:

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

 

And as for your coding, it does look good. Hard to recommend a best solution without understanding exactly how everything is supposed to work. The simplest thing for animateIn/Out stuff is just playing and reversing the same timeline, which it seems you are trying.

 

Having 2 timelines isn't bad, but you can run into problems if the user has the ability to play 1 while the other 1 is still playing. So for instance if the animateIn timeline is playing and the user immediately hits a button to trigger the animateOut timeline, well chances are that tweens in the animateOut function are going to overwrite tweens in the animateIn timeline.

 

Furthermore tweens in the animateOut timeline may get starting values recorded which will not be the values you want to tween from the next time animateOut is called. 

 

These concepts may seem a little advanced if you're just starting out, don't let them worry you right now. There is always a solution.

 

Quite often we recommend in cases like this that you use functions to generate your timelines each time you need a new transition. This way you always get a fresh timeline with the proper values. It also allows you to animateOut of one section while some other content is animating in. Its very flexible.

 

This thread here has an example: 

http://forums.greensock.com/topic/7624-animatein-animateout-example/#entry28926

  • Like 2
Link to comment
Share on other sites

Yesterday codepen support fixed IE10 and IE11 Preview panel, when in Editor Mode, due to the iframe sandbox. I contacted CodePen and they fixed the Preview panel in Editor Mode in IE10 - IE11 yesterday.

 

I could only view the above codepen examples in Full mode. When i click the "Say Hello" button in Editor Mode .. the Preview panel wipes away all contents of the Preview panel and everything goes white in the Preview panel. which looks like a codepen issue.

 

Is anyone having issues when viewing the Preview panel on codepen in Editor Mode in Firefox (Windows 7 64-bit - PC)? :(

Link to comment
Share on other sites

Hi Jonathan,

 

Yep indeed in editor mode there's that issue with this particular codepen in firefox 26 on windows 7.

 

 

 

I was told that they were (and probably are) working on a fix for some issues, but what it strikes as unusual is that is happening only with this codepen. I've checked a lot of other codepens and they're all working good.

 

Rodrigo.

Link to comment
Share on other sites

Thanks guys! That was super helpful : )

 

 

Yesterday codepen support fixed IE10 and IE11 Preview panel, when in Editor Mode, due to the iframe sandbox. I contacted CodePen and they fixed the Preview panel in Editor Mode in IE10 - IE11 yesterday.

 

I could only view the above codepen examples in Full mode. When i click the "Say Hello" button in Editor Mode .. the Preview panel wipes away all contents of the Preview panel and everything goes white in the Preview panel. which looks like a codepen issue.

 

Is anyone having issues when viewing the Preview panel on codepen in Editor Mode in Firefox (Windows 7 64-bit - PC)? :(

 

Hey, this might be a case of sloppy coding on my part. That particular pen was originally built using CSS animations and the Greensock stuff is pretty much retrofitted, so there might be weird issues where I have missed to clean up my CSS causing the app to go haywire.

 

With that said, I've had several weird issues across the site the past few days. Sometimes the fonts all revert times new roman, sometimes when I'm browsing the popular picks the preview won't load in editor mode. I'm using the latest Chrome on OSX Mavericks

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