scaling background image set size before scroll not working

[PixelatedOrange]

Hi all.

 

I've got an odd one that I thought I had working but it's stopped.

 

https://staging.dezarnaulds-design.com

 

The concept is that as you scroll down the background image on the right scales by 20% from 100% to 120%.

 

I've set the background size in css on the .home-header-right to 100%, then on the gsap I have this...

 

backgroundSize: '120%'

 

It did work - the image was @ 100% then got larger as you scrolled down, but for some bizarre reason, it now resets to auto as start hits the trigger.

 

Is it possible in the below code to set the before scroll styles?

 

gsap.to(".home-header-right", {
  scrollTrigger: {
	  trigger: ".home-header-left",
	  start: "top top",
	  end: "bottom bottom",
	  scrub: true,  
  },
  duration: 3,
  backgroundSize: '120%',
});

Thanks for any help!!

[GSAP Helper]

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 CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

[mvaneijgen]

By chance I looked at your site and was about to click it away (because we can't debug a live site).

 

I saw this in your CSS at style.css at line 202 background-size: 100%); this should be background-size: 100%; no idea if that is the issue, but it could be it. If not can you please provide a minimal demo we can take a look at. Hope it helps and happy tweening! 

[PixelatedOrange]

Ah sorry, I'll try and create a CodePen now.

 

@mvaneijgen Sorry, not sure what your message means.

 

Thanks

Aaron

[mvaneijgen]

2 minutes ago, PixelatedOrange said:

Sorry, not sure what your message means.

 

There is a typo in your CSS file on line 202 you have a ) after your %. I would suggest taking a look at that to see if it fixes the issue.

[PixelatedOrange]

@mvaneijgen thank you, have removed that and still no joy.

Didn't realise you can't debug a live site, my apologies.

 

Haven't created a codepin before, so it's going to take me a little while to translate it over.

 

I suppose the easier question is...

 

Is there a way in the scrollTrigger js code to set the before trigger styles so it know what to tween from?  (if that makes sense).

[mvaneijgen]

12 minutes ago, PixelatedOrange said:

Didn't realise you can't debug a live site, my apologies.

Yeah, we can't edit anything and sometimes even finding the CSS or JS can be a hassle, also most sites minify everything which makes it even harder. 

 

12 minutes ago, PixelatedOrange said:

Haven't created a codepin before, so it's going to take me a little while to translate it over.

It can just be some colour divs with the same classes and styles. Don't recreate your whole site. When making the demo you will probably figure out what is causing the bug your self, at least that happens to me all the time. 

 

11 minutes ago, PixelatedOrange said:

Is there a way in the scrollTrigger js code to set the before trigger styles so it know what to tween from?  (if that makes sense).

That should be the case. That is why it is a weird bug.