Jump to content
Search Community

Change background on scroll

stefanopeschiera test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

  • Solution

 

Hey @stefanopeschiera

 

Unfortunately you are making one of the most common ScrollTrigger mistakes; creating .to() logic issues.

 

Giving your ScrollTriggers proper start and end values and setting immediateRender to false makes it work much better. 

 

See the Pen cebdcbbba329eca3c8c9d7acfd53ba7d by akapowl (@akapowl) on CodePen

 

 

 

Hope this helps. Happy scrolling.

 

 

  • Like 4
Link to comment
Share on other sites

Hi Stefano!

 

This one was a puzzler and I learnt something too today.

ScrollTriggers are created when the page is initialized so the values get locked in right away - in your case the css variables are animating from the initial value set in the css.

You can set immediateRender:false on your tweens to stop this from happening. 


See the Pen 1a53411eb2ef9f0272809f2ea34a50c5?editors=0010 by cassie-codes (@cassie-codes) on CodePen

  • Like 3
Link to comment
Share on other sites

  • 11 months later...

So this is awesome - but if I want to fade change the background image, rather than colour of a section, what do I need to do?

 

I'm using this to change the background image on section 2, and it changes the image, but it's quite sudden:

 

gsap.to("body", {
backgroundImage:'url(/img/image.jpg)',
  immediateRender: false,
  scrollTrigger: {
    trigger: ".section-2",
    scroller: ".container",
    scrub: true,
    start:'top bottom',
    end: '+=100%'
  }
});

Link to comment
Share on other sites

  • 1 year later...
On 3/8/2022 at 6:19 PM, OSUblake said:

Hi Russ,

 

You logically can't fade a backgroundImage to another image. You would need to use at least 2 images stacked on top of each other to achieve a fade.

 

OSUblake can u provide some code example please to change images and videos background?

Link to comment
Share on other sites

  • 7 months later...

Hi! I'm trying to achieve the same result, but I'm not able to create a smooth transition because the value of the variable keeps restarting. I'm working on Webflow and this is my read-only link

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

<script>
gsap.registerPlugin(ScrollTrigger);

gsap.to(".peliculas-bg", {
  "--color": "#FFD684",
    scrollTrigger: {
      trigger: "#pelicula-2013",
      start: "top center",
      end: "bottom center",
      markers: true,
      toggleActions: "restart none restart pause"
    },
});
gsap.to(".peliculas-bg", {
    "--color": "#A6FFFE",
        immediateRender: false,
    scrollTrigger: {
      trigger: "#pelicula-2014",
      start: "top center",
      end: "bottom center",
      markers: true,
      toggleActions: "restart none restart pause"
    },
});
gsap.to(".peliculas-bg", {
        "--color": "#1C3448",
        immediateRender: false,
    scrollTrigger: {
      trigger: "#pelicula-2015",
      start: "top center",
      end: "bottom center",
      markers: true,
      toggleActions: "restart none restart pause"
    }
});
</script>

 

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates 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. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

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: 

 

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. 

Link to comment
Share on other sites

Hi,

 

On top of echoing the need of a minimal demo is worth noticing that the versions you're getting from these scripts are different:

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

The version from JSDelivr is most likely the latest one (3.12.2) while the ScrollTrigger is a previous one. We strongly recommend to always use the latest versions for the core files and the plugins.

 

Finally maybe this demo can help:

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

 

Happy Tweening!

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