Jump to content


tween the background-url only ?

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 have a CSS class



.case-section{background:url(image.jpg) no-repeat;}


<div class="case-section">
     <div class="logoHolder">
         <a href="#"><img src="image.png"/></a>
            <span class="logoPunch"></span>
        <div class="headingHolder">
         <h2>The Client</h2>
            <p>lorem ipsum</p>
            <h2 class="marginTop25">Header</h2>
            <p>more text here</p>


var bgImage : $('.case-section').css('background-image')
TweenLite.from(this.bgImage, .5, {opacity:0});

Thanks for any help

- P

Link to comment
Share on other sites

Just to clarify - there is no ability in CSS to modify a background-image's opacity at all.


The only way to achieve this would be the method Rodrigo suggested (tweening the opacity of a pseudo background element with CSSRulePlugin) or by adding another div to your element with it's own background image, and tweening the opacity of that div.


Check it out:

See the Pen qmfJy by jamiejefferson (@jamiejefferson) on CodePen

  • Like 2
Link to comment
Share on other sites

Thx guys. It was good to learn how to use the CSSRule Plugin. Turns out its easier to refactor the code and add the image through a div and not CSS.


This was helpful.

Thx again.

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.