Problems with background-attachement

[maleuh]

I just got a problem in my project:
I have a header with a background image with the property background-attachement: fixed; 
My header have to be in the wrapper and the smooth-content because it have children with effects from the plugin. 
How can I make  this background to be fixed, I thought about a way to make this property more important than the plugin effects to get the priority and make everything work but idk how.

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[maleuh]

<navigation />

    <div id="smooth-wrapper">

      <div id="smooth-content">

        <header :class="{ 'home-page': isHomePage, 'page-header': !isHomePage}">

          <div data-speed="1.2" :class="{'special-watch': isHomePage, 'hidden': !isHomePage}">

            <div class="special-watch-subhead">DISCOVER THE SEASON’S SELECTION</div>

            <div class="special-watch-title">the new interpretation of our heritage</div>

          </div>

          <div class="blue-button-aliner">

            <blueButton data-speed="1.2" buttonText="discover" buttonLink="/contact"></blueButton>

          </div>

          <h1 data-speed="1.2" :class="{'page-title': !isHomePage, 'hidden': isHomePage}">{{ $route.name }}</h1>

        </header>

        <div class="grid-aliner">

          <div class="page-grid">

            <router-view></router-view>

          </div>

        </div>

      </div>

    </div>

  </div>

 

.page-header,

.home-page {

  width: 100vw;

  height: 745px;

  background-attachment: fixed;

  background-image: url(../assets/img/story-dragon.jpg);

}


the thing is, the background-attachment works perfectly when my header is out of the smooth-wrapper and smooth-content, but i need it to be in it.

[Rodrigo]

Hi @maleuh and welcome to the GSAP Forums!

 

Thanks for being a GSAP Club member and supporting GSAP! 💚

 

Unfortunately the code snippets you have posted already doesn't really tell us what exactly is the issue you're facing, that's why we request a minimal demo in order to get a better idea of the problem and be able to tinker with the demo as well. We do that since after more than 15 years doing this we've realized that this is the faster way to solve an issue.

 

Please do your best to reproduce the issue in a codepen demo. If fork the one that was posted by @GSAP Helper you'll be able to use all the bonus plugins including ScrollSmoother.

 

Happy Tweening!