Jump to content
Search Community

Revealing a background

Stagnax test
Moderator Tag

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 am trying to reveal the black background only after the two red and blue canvases have completed the animation.

But as you can see there is "leak" and the black ground is visible during the rotation.

Also I'm learning to control overflow and have found this link https://stackoverflow.com/questions/8837050/allow-specific-tag-to-override-overflowhidden

, but theres something I'm doing wrong .

Please Help. :)

 

See the Pen MVgdpW by stagnax (@stagnax) on CodePen

Link to comment
Share on other sites

Thanks for the demo. I don't understand what you mean by leak of the background or "black ground".

Kind of confused. 

 

Is your question related to something that GSAP isn't doing properly or the layout with your html and css?

 

  • Like 2
Link to comment
Share on other sites

Hi  @Carl,

 

Sorry I meant black background:mellow:.

What I am trying to achieve is that ,the black background should only be visible until the red and blue layouts complete their rotation.

To answer your second question I don't know it its a layout problem or GSAP .

I've given 100% height and width to the canvases but still when rotation starts they rotate in rectangle rather than covering the whole screen.

Sorry for my bad english :)

I hope i made myself clear 

dfergeg.png

Link to comment
Share on other sites

Hello @Stagnax and Welcome to the GreenSock Forum!

 

There are many reasons why you still see the black background.

  1. I don't see any canvas elements being used in your example, even though i see canvas.js being loaded.
  2. Your body tag has a background of black, but your #c1 and #c2 child elements do not take up the full space of the viewport. In this case each child (#c1 and #c2) positions should be half of the viewport for each. 50% or using viewport units (vw)
  3. Overflow: hidden would not do anything in your case since your background is black. And you are rotating elements with a fixed width percentage and height, so there you will see the <body> background color regardless.
  4. I think you mean to rotate and have the red and blue boxes be extended past the viewport, so when rotated you don't see the black background on the body tag. Because when you view your codepen on a larger screen that is 1080p, you will also see the black body background on both right and left sides. So you will need to fix your initial HTML markup to account for when its rotated taking up half the screen for each blue and red box.
  5. Your better off just creating an additional parent wrapper and not rely on the body tag as your main background element.
  6. z-index wont do anything unless the element has position absolute, fixed, or relative.
  7. You should first layout the page the way you want with the initial CSS and then animating will be much easier to achieve.

Just my two cents.

 

Happy Tweening!

  • Like 5
Link to comment
Share on other sites

Quote

I don't see any canvas elements being used in your example, even though i see canvas.js being loaded.

 

He changed his demo and replaced canvas tags with divs, he just had to set display block on canvas elements. But probably no one will understand what I am talking about. :D

 

@Stagnax That's why you should never edit posted demo, if you want to make changes just fork your original demo and make changes to it. It keeps forum organized and gives any new reader exact idea about what was the conversation about.

  • Like 4
Link to comment
Share on other sites

What if... set first the default color of the background and tween it with black after the tween animation done.

If you don't understand, what I mean is set it first as white background and don't set it on the css make it on the javascript.

After the animation has been done then put a trigger to call the tween for the black background to appear. Doest it make sense?

  • Like 2
Link to comment
Share on other sites

Hello @Stagnax Here's my solution...

See the Pen dmyvKG by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

 

What I've done is I made an extra layer of black in the background of your rotating elements.
 

div#black {
  background: black;
  position: absolute;
  height:100vh;
  width: 100vw;
}

 

and then add z-index to your row so it will be in the top of the whole show...

div#row {
  z-index: 100;
}

 

and here's how I setup the whole show...

window.onload = init;

function init() {
  var canvas = document.getElementsByClassName('rot');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
  
  TweenMax.set("#black", {opacity: 0, onComplete: animation});
}

function animation() {
  TweenMax.to("#row", 3, {rotation:-90, onComplete: revealBlackBG});
}

function revealBlackBG() {
  TweenMax.to("#black", 1, {opacity: 1, ease:Linear.easeIn});
}

 

I hide first the black layer and then after the animation done you eventually show it at the end... 

 

Let me know if it is really helpful...

Link to comment
Share on other sites

hi @WarenGonzaga

Thanks for the effort.

But i wanted to reveal the black background after the red and blue blocks have rotated

To point it perfectly as jonathan pointed out :

  1. I think you mean to rotate and have the red and blue boxes be extended past the viewport, so when rotated you don't see the black background on the body tag. Because when you view your codepen on a larger screen that is 1080p, you will also see the black body background on both right and left sides. So you will need to fix your initial HTML markup to account for when its rotated taking up half the screen for each blue and red box.

 

Again thank you

Link to comment
Share on other sites

2 minutes ago, Stagnax said:

hi @WarenGonzaga

Thanks for the effort.

But i wanted to reveal the black background after the red and blue blocks have rotated

To point it perfectly as jonathan pointed out :

  1. I think you mean to rotate and have the red and blue boxes be extended past the viewport, so when rotated you don't see the black background on the body tag. Because when you view your codepen on a larger screen that is 1080p, you will also see the black body background on both right and left sides. So you will need to fix your initial HTML markup to account for when its rotated taking up half the screen for each blue and red box.

 

Again thank you

 

Anyway, you can follow @Jonathan suggestion... 

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