Jump to content
GreenSock

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

Overlay color

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

Hello, I am revealing an image by putting an overlay on top of the image. However, the background has 2 colors, and I obviously can set only 1 background color on the overlay. Is there a way for the overlay to inherit the color? Maybe a gsap property? I thought about using after & before, but it would take a lot of time when doing it for multiple images. Any ideas? I added a codepen for clarification. 

Thanks in advance!  

See the Pen VJLmLQ by vountish (@vountish) on CodePen

Link to comment
Share on other sites

I don't know if it suits your needs but you could animate the wrapper size with a few tweaks to your css instead of using an overlay.

 

See the Pen MMwJeO by Visual-Q (@Visual-Q) on CodePen

  • Like 4
Link to comment
Share on other sites

Hello @Emilek1337 and Welcome to the GreenSock Forum!

 

I have a different take on your question by just adding one CSS rule to your code.

 

But lets answer one of your questions... You asked the following:

 

16 hours ago, Emilek1337 said:

However, the background has 2 colors, and I obviously can set only 1 background color on the overlay.

 

Technically you can have 2 background colors on your element. This is done by using CSS pseudo-elements of ::before or ::after. The .img-overlay element has the pink color as its background, and the generated content of the ::after CSS will give that DeepSkyBlue as your 2nd background color.

 

For example you can add the following CSS rule to your codepen  .img-overlay::after.

 

.img-overlay::after {
    content: "";
    height: 50%;
    width: 100%;
    background-color: DeepSkyBlue;
    z-index: 99;
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto;
}

 

Like this:

 

See the Pen bPdyQG by jonathan (@jonathan) on CodePen

 

Happy Tweening :)

 

Resources:

Pseudo-Elements: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before

::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after

 

  • Like 4
Link to comment
Share on other sites

5 hours ago, Jonathan said:

Hello @Emilek1337 and Welcome to the GreenSock Forum!

 

I have a different take on your question by just adding one CSS rule to your code.

 

But lets answer one of your questions... You asked the following:

 

 

Technically you can have 2 background colors on your element. This is done by using CSS pseudo-elements of ::before or ::after. The .img-overlay element has the pink color as its background, and the generated content of the ::after CSS will give that DeepSkyBlue as your 2nd background color.

 

For example you can add the following CSS rule to your codepen  .img-overlay::after.

 


.img-overlay::after {
    content: "";
    height: 50%;
    width: 100%;
    background-color: DeepSkyBlue;
    z-index: 99;
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto;
}

 

Like this:

 

 

 

 

Happy Tweening :)

 

Resources:

Pseudo-Elements: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before

::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after

 

Thank you for the solution. I already considered this one, and was going to use it, unless gsap had it's own solution to this. I'm animating a lot of things like that on quite a big site, so I was looking for an automated solution, but it seems like playing with pseudo elements is the only options.

Anyway, thank you all for help!

  • Like 1
Link to comment
Share on other sites

That solution I advised on was just CSS and doesn't require animating since its already part of the overlay your already animating. Normally that type of thing would have to be done with an extra element and also having to animate that element in sync with your original overlay. Or adjusting the background offset like @Visual-Q advised above.

 

But your issue was more of having to do with the setup of your layout. And Pseudo-Elements allow that flexibility of not having to create extra elements into the DOM since you wanted the overlay to have 2 background-colors.  GSAP just simply animates that layout and or elements you already have marked up. Since GSAP can animate any element or object and allows you setup your html, svg, canvas, webgl, js object ... etc.. the way you want ;) 

 

But glad you found it useful :)

  • Like 2
Link to comment
Share on other sites

 

42 minutes ago, Emilek1337 said:

I'm animating a lot of things like that on quite a big site, so I was looking for an automated solution,

 

Depends on whether you have any reason for using an overlay other than hiding the image, by animating the image's wrapper size instead it's parent still holds it's place in the DOM but there is no need to match the background as it's transparent until the img wrapper 'fills it up'.

Link to comment
Share on other sites

34 minutes ago, Visual-Q said:

 

 

Depends on whether you have any reason for using an overlay other than hiding the image, by animating the image's wrapper size instead it's parent still holds it's place in the DOM but there is no need to match the background as it's transparent until the img wrapper 'fills it up'.

I didn't really understand your explanation. Do you mean something like this? 

See the Pen VJLmLQ by vountish (@vountish) on CodePen

I'm using an overlay because I don't want the image to stretch out, so I don't modify the image at all, I only move the overlay so the images becomes visible.

Link to comment
Share on other sites

You can make the image the size of img-box instead of relative to the wrapper size like this if the img-box has a fixed size. 

 

See the Pen MMwJeO by Visual-Q (@Visual-Q) on CodePen

  • Like 1
Link to comment
Share on other sites

7 minutes ago, Visual-Q said:

You can make the image the size of img-box instead of relative to the wrapper size like this if the img-box has a fixed size. 

 

 

 

That's what I needed, thanks a lot! 

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